Home >Web Front-end >HTML Tutorial >两个div怎样横向排列？_html/css_WEB-ITnose
两个div怎样横向排列？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:42:241540browse
怎么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属性的元素把外部框架给撑起来，否则显示就可能会出现一项不到的问题
还有，建议楼主写代码注意下缩进，格式不好 有错误的话不管自己还是别人都很难发现
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：在线图片编辑_html/css_WEB-ITnoseNext article：想实现一个像csdn论坛的侧边栏显示和隐藏效果遇到困难_html/css_WEB-ITnose