两个div怎样横向排列？_html/css_WEB-ITnose-html教學-PHP中文網

两个div怎样横向排列？_html/css_WEB-ITnose

WBOY

發布： 2016-06-21 09:42:24

原創

1539 人瀏覽過

本帖最后由 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>        <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属性的元素把外部框架给撑起来，否则显示就可能会出现一项不到的问题

还有，建议楼主写代码注意下缩进，格式不好有错误的话不管自己还是别人都很难发现