html/css 两个div在同一行

在界面设计的时候，经常需要将两个div在同一行显示。

但是每次都会忘记怎么做，特此随笔，备忘。

如以下要将“第一个div”和“第二个div”显示在同一行：

<div id="id1">  /*外层div*/

    <div id="id2" style="width:100px;height:20px;">第一个div</div>

    <div id="id3" style="width:100px;height:20px;">第二个div</div>

</div>

只需要对id2和id3增加css样式即可，如下所示：

<div id="id1">  /*外层div*/

    <div id="id2" style="width:100px;height:20px;float:left;">第一个div</div>

    <div id="id3" style="width:100px;height:20px;float:left;">第二个div</div>

</div>

这样就可以了。很简单吧。

 

2016.09.20 修改补充

在此随笔发出的几个小时之后，有大神提出了质疑：没有清除浮动，并给我了一个差评。

哈哈哈哈。感谢这位大神的指正。

那下面就清除一下浮动吧。

以下面代码为例进行说明：

（1）

<div id="id1" style="width:300px;border:1px solid black">  

    <div id="id2" style="width:100px;height:20px;float:left;border:1px solid red">第一个div</div>

    <div id="id3" style="width:100px;height:20px;float:left;border:1px solid blue">第二个div</div>

</div>

代码（1）的截图为，可以看到，id2和id3并没有在id1中。这就是没有清除浮动的效果。

清除浮动的方法：

1、对父级设置合适的高度：对父级设置合适的高度进行清除浮动，父级内内容的高度为20px+2px=22px，在id1中增加样式height=“22px”即可。

效果图：。

缺点：对父级设置合适的高度来清除浮动的这种方法必须要知道父级内容的高度。比较不方便。

2、clear:both清除浮动：在父级元素结束前，增加以下红色代码，清除浮动。

<div id="id1" style="width:300px;border:1px solid black"> 

    <div id="id2" style="width:100px;height:20px;float:left;border:1px solid red">第一个div</div>

    <div id="id3" style="width:100px;height:20px;float:left;border:1px solid blue">第二个div</div>

    <div id="id4" style="clear:both"></div>  /*增加此句，清除浮动*/

</div>

效果图：。

3、父级div定义overflow:hidden清除浮动：

id1增加overflow:hidden样式，即可清除父级元素内使用float:left/float:right产生的浮动。

效果图：。

 

以上是清除浮动的三种方法，望大神指教。

参考：http://www.divcss5.com/jiqiao/j406.shtml

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有