在界面设计的时候,经常需要将两个div在同一行显示。
但是每次都会忘记怎么做,特此随笔,备忘。
如以下要将“第一个div”和“第二个div”显示在同一行:
/*外层div*/ 第一个div 第二个div
只需要对id2和id3增加css样式即可,如下所示:
/*外层div*/ 第一个div 第二个div
这样就可以了。很简单吧。
.09.20 修改补充
在此随笔发出的几个小时之后,有大神提出了质疑:没有清除浮动,并给我了一个差评。
哈哈哈哈。感谢这位大神的指正。
那下面就清除一下浮动吧。
以下面代码为例进行说明:
(1)
第一个div 第二个div
代码(1)的截图为
清除浮动的方法:
1、对父级设置合适的高度:对父级设置合适的高度进行清除浮动,父级内内容的高度为20px+2px=22px,在id1中增加样式height=“22px”即可。
效果图:
缺点:对父级设置合适的高度来清除浮动的这种方法必须要知道父级内容的高度。比较不方便。
2、clear:both清除浮动:在父级元素结束前,增加以下红色代码,清除浮动。
第一个div 第二个div
效果图:
3、父级div定义overflow:hidden清除浮动:
id1增加overflow:hidden样式,即可清除父级元素内使用float:left/float:right产生的浮动。
效果图:
以上是清除浮动的三种方法,望大神指教。
参考:/jiqiao/j406.shtml
如何让两个div在同一行显示?一个float搞定
最近在学习div和css,遇到了一些问题也解决了很多以前以为很难搞定的问题.比如:如何让两个div显示在同一行呢?(不是用table表格,table对SE不太友好)其实,
是一个 ...
div+css:两个div并排等高 (table-cell)
两个div并排等高
< ...
两个div在同一行,两个div不换行
方法一:
...
css两个form不换行,两个div并排代码
1.form不换行通过table布局实现