DIV并排显示并换行

最新推荐文章于 2023-10-12 23:29:23 发布
最新推荐文章于 2023-10-12 23:29:23 发布
阅读量5.7k 收藏 1
点赞数
分类专栏： asp.Net 文章标签： javascript html js DIV DIV同行
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CLeopard/article/details/38849311
版权

        背景：

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

        方法试探：     

<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>
        效果：

        







CLeopard
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
让两个Div并排显示的多种方法
09-25
让两个Div并排显示的方法有很多，使用display的inline属性、通过设置float来让Div并排显示都可以实现，感兴趣的朋友可以参考下本
div并排排列的两种方法浅谈。
weixin_30715523的博客
07-04 288
div是块级元素，所以在排列的时候会纵向排列，如果想解决这个问题的话，可以给div加上float：left/right样式，这样div就会横向排列（无缝排列） .div-one{ background-color:red; /*无缝排列*/ float: left;} 如果说想让div横向排列并且div之间有缝隙，那么可以将div变成行内块（display：inline-bl...
html样式解决div块换行不能div并排摆放问题问题 css
oMangGuoBuDing1的专栏
03-26 299
样式正增加 float:left;属性，否则放两个div就换行。审查元素时margin很大，找不到原因。最后解决
两个div在同一行，且让第三个div换行，去除浮动
最新发布
weixin_42504805的博客
10-12 175
效果：
多种方法解决多个div并排显示的问题
weixin_43912081的博客
08-15 1万+
平时做项目中总是能碰到让多个div显示在一排的问题 例如： 将上图显示为: 其实有很多种方法都可解决此问题 在这里做一下总结 一、使用 display 也就是说块元素占用了全部宽度，前后会带有换行符，会自动的在一行显示，而内联元素只需要设置宽度，不会带有换行符，也就是默认不换行 那么我们就可以考虑把 div 这种块元素转换为内联元素 即可实现 div 在一行显示，就可达到我们的目的 display有很多属性值 如下： none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对
前端学习（271）：网格布局grid-template
歌谣的博客
12-31 313
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
div对齐实例以及注意事项
kou869929526的博客
04-19 661
自己的小小总结，欢迎提供更好的意见
div中英文无法自动换行的解决办法
12-11
但是，如果输入的是英文字母，那么，无论你div设定宽度为多少，英文字母都是不换行直接在同一行输出，导致div的宽度远远超出设定的大小。 原因：这是因为div中，英文字母之间没有空格的话，它会默认认为这是一个...
两个div并排的实现代码
09-25
两个div并排的实现代码，一般在使用过程中，最好外面再包括一个用来定位居中显示。这里主要是了解下css的左右浮动布局给开始学习css的朋友。
div css nowrap无换行
10-30
昨天在使用css结合div布局的时候碰到了一个问题。 在一个规定宽度大小的ul里边 我把li的宽度定义为自动。企图让li根据内容长度来自动向左对齐排列。
DIV CSS 图片自动换行
07-17
DIV CSS 图片自动换行 图片带鼠标效果
C#根据控件名获取控件对象
热门推荐
CLeopard's Blog In CSDN
11-07 3万+
需求：在一个项目中，要实现一个控件选择功能，如果一个个的去判断，代码会十分难看，由于控件名有规律，是否可以根据控件直接找到对应的控件对象？ 实现：利用反射 object o = this.GetType().GetField(name, System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.I
Aspose.Cells区域格式设置
CLeopard's Blog In CSDN
11-14 1万+
首先设置格式
jQuery EasyUI combotree 只允许选叶子节点
CLeopard's Blog In CSDN
05-07 9447
jQuery EasyUI combotree 只允许选叶子节点如果不是叶子节点，清除选中：$('#ddtree').combotree( { //选择树节点触发事件 onSelect : function(node) { //返回树对象 var tree = $(this).tree; //选中的节点是否为叶子节点
WinForm控制Webbrowser自动登录
CLeopard's Blog In CSDN
10-21 2577
1 WebBrowser显示到指定位置： 2
inno setup 5 添加快捷方式默认选中
CLeopard's Blog In CSDN
10-29 2414
checkablealone  搜索"选中"意思 unchecked       "非选中"意思
css 并排图片如何换行
06-02
要实现并排图片换行的效果，可以使用 CSS 中的 float 属性。将图片的 float 属性设置为 left 或 right，可以让图片浮动在文本的左侧或右侧，但是当图片的总宽度超过了容器的宽度时，图片将会跨行显示。为了让图片在宽度超过容器的时候自动换行，可以在容器的 CSS 样式中设置 overflow 属性为 auto 或 hidden。这样当图片的宽度超过容器的宽度时，图片将会自动换行到下一行。例如： HTML 代码： ``` <div class="image-container"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> </div> ``` CSS 代码： ``` .image-container { overflow: auto; } .image-container img { float: left; width: 33.33%; } ``` 这段代码将会将三张图片并排显示，当图片总宽度超过容器的宽度时，图片会自动换行到下一行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值