两个div怎样横向排列？_html/css_WEB-ITnose
- WBOY原創
- 2016-06-21 09:42:241540瀏覽
怎么div2不是在第二行的最左边？？
我的页面如下:
现在的效果是
div1 div1label
div2 div2label
我要的效果是：
div1 div1label
div2 div2label
请问怎么改？？
这个地方是关键，一定要把上个div的float给clear,否则布局上很容易出现问题
效果如下：
只加了一行代码。用了float的元素是脱离于文档的，正式因为这样，才能实现浮动的效果；所以对于外框架的div来说，你必须再用一个拥有clear属性的元素把外部框架给撑起来，否则显示就可能会出现一项不到的问题
我的页面如下:
<div> <div style="width: 100px; height: 100px; float: left">div1</div> <label>div1label</label> </div> <div> <div style="width: 100px; height: 100px; float: left">div2</div> <label>div2label</label> </div>
现在的效果是
div1 div1label
div2 div2label
我要的效果是：
div1 div1label
div2 div2label
请问怎么改？？
回复讨论(解决方案)
clear 属性定义了元素的哪边上不允许出现浮动元素,用clear
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title></title></head><body> <div style="overflow:hidden;"> <div style="width: 100px; height: 100px; float: left">div1</div> <label>div1label</label> </div> <div> <div style="width: 100px; height: 100px; float: left">div2</div> <label>div2label</label> </div></body></html>
出现这种情况，可能是这两个DIV的父元素太小。
出现这种情况，可能是这两个DIV的父元素太小。
楼主给出的片段没有问题的。应该给出完整代码。请逐级检查父元素。
<div> <div style="width: 50px; height: 100px; float: left"> div1</div> <label> div1label</label> </div> <div style="clear: left"> <div style="width: 50px; height: 100px; float: left" > div2</div> <label> div2label</label> </div>
这个地方是关键，一定要把上个div的float给clear,否则布局上很容易出现问题
楼上正解，清除浮动，你也可以绝对定位
<div> <div style="width: 100px; height: 100px; float: left"> div1 </div> <label>div1label</label> <!--在源代码上加上下面这行就行了--> <div style="clear:both"></div> </div> <div> <div style="width: 100px; height: 100px; float: left"> div2 </div> <label>div2label</label> </div>
效果如下：
只加了一行代码。用了float的元素是脱离于文档的，正式因为这样，才能实现浮动的效果；所以对于外框架的div来说，你必须再用一个拥有clear属性的元素把外部框架给撑起来，否则显示就可能会出现一项不到的问题
还有，建议楼主写代码注意下缩进，格式不好 有错误的话不管自己还是别人都很难发现
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn