DIV并排显示并换行

来源：互联网发布：网络主播英语编辑：程序博客网时间：2024/05/17 04:01

背景：

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

方法试探：

<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>

效果：

0 0