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