DIV并排显示并换行

关注

原创最新推荐文章于 2026-04-10 10:08:31 发布 5.9k 阅读 AI 写同款· GEO 优化 ›

几个div有间隙且并排显示的方法几个div有间隙并排显示的方法在实际开发中，很多情况下需要多个div有间隙的并排显示，下面是我总结的几种方法。这是我们要实现的效果图一、使用float浮动首先，根据要实现的效果图，... 阅读详情

背景：

想加个进度条，类似于这样：，但是文字总是处于近吐掉上方：。

方法试探：

<div style="float:left;"> Process1:</div>
<div style="float:left;"> 
    <div style="padding: 1px; background-color: #E6E6E6; border: 1px solid #C0C0C0; width: 300px; height: 20px;">
        <div id="processbar" style=" background-color: #00CC00; height: 19px; width: 250px;"></div>
    </div>
</div>

得到想要的样子：

，但是重复添加，如：

<div style="float:left;"> Process1:</div>
<div style="float:left;"> 
    <div style="padding: 1px; background-color: #E6E6E6; border: 1px solid #C0C0C0; width: 300px; height: 20px;">
        <div id="processbar" style=" background-color: #00CC00; height: 19px; width: 250px;"></div>
    </div>
</div>
<br />
<div style="float:left;"> Process1:</div>
<div style="float:left;"> 
    <div style="padding: 1px; background-color: #E6E6E6; border: 1px solid #C0C0C0; width: 300px; height: 20px;">
        <div id="processbar" style=" background-color: #00CC00; height: 19px; width: 250px;"></div>
    </div>
</div>

得到效果：

，没有换行。

加空DIV后，换行：

<div style="float:left;"> Process1:</div>
<div style="float:left;"> 
    <div style="padding: 1px; background-color: #E6E6E6; border: 1px solid #C0C0C0; width: 300px; height: 20px;">
        <div id="processbar" style=" background-color: #00CC00; height: 19px; width: 250px;"></div>
    </div>
</div>
<div >end</div>
<br />

<div style="float:left;"> Process1:</div>
<div style="float:left;"> 
    <div style="padding: 1px; background-color: #E6E6E6; border: 1px solid #C0C0C0; width: 300px; height: 20px;">
        <div id="processbar" style=" background-color: #00CC00; height: 19px; width: 250px;"></div>
    </div>
</div>
<div >end</div>

效果：

。

一个朋友给代码，不用加空DIV就可换行：

<div style="float:left;">Prooess2:</div>
<div style="float:left;">
    <div style="padding:1px;background-color:#e6e6e6;height:auto;overflow:hidden;margin-top:5px;">
        <div style="width:100px;height:10px;background-color:green;"></div>
    </div>
</div>
<div style="float:left;">end</div>
<br />
<div style="float:left;">Prooess3:</div>
<div style="float:left;">
    <div style="padding:1px;background-color:#e6e6e6;height:auto;overflow:hidden;margin-top:5px;">
        <div style="width:100px;height:10px;background-color:green;"></div>
    </div>
</div>
<div style="float:left;">end</div>

效果：

。

问题

对比，发现原代码去掉如下代码后，换行，否则不换行，不解，先存放。

border: 1px solid #C0C0C0;

去掉前：

去掉后：

原代码使用<div style="float:left;">end</div>依旧会不换行，不知道为啥。代码：

<div style="float:left;"> Process1:</div>
<div style="float:left;"> 
    <div style="padding: 1px; background-color: #E6E6E6; width: 300px; height: 20px;">
        <div id="processbar" style=" background-color: #00CC00; height: 19px; width: 250px;"></div>
    </div>
</div>
<div style="float:left;">end</div>
<br />
<div style="float:left;"> Process1:</div>
<div style="float:left;"> 
    <div style="padding: 1px; background-color: #E6E6E6; border: 1px solid #C0C0C0; width: 300px; height: 20px;">
        <div id="processbar" style=" background-color: #00CC00; height: 19px; width: 250px;"></div>
    </div>
</div>
<div >end</div>
<br />
<div style="float:left;"> Process1:</div>
<div style="float:left;"> 
    <div style="padding: 1px; background-color: #E6E6E6; border: 1px solid #C0C0C0; width: 300px; height: 20px;">
        <div id="processbar" style=" background-color: #00CC00; height: 19px; width: 250px;"></div>
    </div>
</div>
<div >end</div>
<br />

效果图：

。

也可用table。全代码：

<html>
<body> 
<div style="float:left;"> Process1:</div>
<div style="float:left;"> 
    <div style="padding: 1px; background-color: #E6E6E6; width: 300px; height: 20px;">
        <div id="processbar" style=" background-color: #00CC00; height: 19px; width: 250px;"></div>
    </div>
</div>
<div style="float:left;">end</div>
<br />
<div style="float:left;"> Process1:</div>
<div style="float:left;"> 
    <div style="padding: 1px; background-color: #E6E6E6; border: 1px solid #C0C0C0; width: 300px; height: 20px;">
        <div id="processbar" style=" background-color: #00CC00; height: 19px; width: 250px;"></div>
    </div>
</div>
<div >end</div>
<br />
<div style="float:left;"> Process1:</div>
<div style="float:left;"> 
    <div style="padding: 1px; background-color: #E6E6E6; border: 1px solid #C0C0C0; width: 300px; height: 20px;">
        <div id="processbar" style=" background-color: #00CC00; height: 19px; width: 250px;"></div>
    </div>
</div>
<div >end</div>
<br />

<div style="float:left;"> Process1:</div>
<div style="float:left;"> 
    <div style="padding: 1px; background-color: #E6E6E6; border: 1px solid; width: 300px;height:auto;overflow:hidden;margin-top:5px;">
                <div style="width:100px;height:10px;background-color:green;"></div>
    </div>
</div>
<div >end</div>

<br />
<div style="float:left;">Prooess2:</div>
<div style="float:left;">
    <div style="padding:1px;background-color:#e6e6e6;height:auto;overflow:hidden;margin-top:5px;">
        <div style="width:100px;height:10px;background-color:green;"></div>
    </div>
</div>
<div style="float:left;">end</div>
<br />
<div style="float:left;">Prooess3:</div>
<div style="float:left;">
    <div style="padding:1px;background-color:#e6e6e6;height:auto;overflow:hidden;margin-top:5px;">
        <div style="width:100px;height:10px;background-color:green;"></div>
    </div>
</div>
<div style="float:left;">end</div>

<br />
<div style="float:left;">Prooess1:</div>
<div style="float:left;">
    <div style="padding:1px;background-color:#e6e6e6;height:auto;overflow:hidden;margin-top:5px;">
        <div style="width:100px;height:10px;background-color:green;"></div>
    </div>
</div>
<div style="float:left;">end</div>
<br />
<div style="float:left;">Prooess1:</div>
<div style="float:left;">
    <div style="padding:1px;background-color:#e6e6e6;height:auto;overflow:hidden;margin-top:5px;">
        <div style="width:100px;height:10px;background-color:green;"></div>
    </div>
</div>
<div style="float:left;">end</div>
<br />


<table border="0">
    <tr>
        <td>Prooess1:</td>
        <td>
            <div style="padding:1px;background-color:#e6e6e6;height:auto;overflow:hidden;">
                <div style="width:100px;height:10px;background-color:green;"></div>
            </div>
        </td>
        <td>End</td>
    </tr>
</table>
<table border="0">
    <tr>
        <td>Prooess1:</td>
        <td>
            <div style="padding:1px;background-color:#e6e6e6;height:auto;overflow:hidden;">
                <div style="width:100px;height:10px;background-color:green;"></div>
            </div>
        </td>
        <td>End</td>
    </tr>
</table>


</body> 
</html>

效果：