两个div怎样横向排列?
本帖最后由 whoamiwho 于 2013-03-24 21:07:55 编辑 怎么div2不是在第二行的最左边??
我的页面如下:
<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 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 style="clear: left">
这个地方是关键,一定要把上个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属性的元素把外部框架给撑起来,否则显示就可能会出现一项不到的问题
[解决办法]
还有,建议楼主写代码注意下缩进,格式不好 有错误的话不管自己还是别人都很难发现