php设计一个盒子类代码_CSS中多个div盒子并排同行显示的实例代码分享

1、div 两列 一行两列DIV布局如何实现，div 两列并排 一行两列DIV布局教程解决篇

实现两个DIV盒子并排，一行只显示两列DIV布局，使用width宽度+float浮动即可实现一行显示两列DIV布局。

第一种情况，float浮动相同

让两个div盒子的float值相同，比如都设置float:left或float:right，宽度设置合适即可。这里我们通过案例实现一行两列DIV布局。

1)、完整实例DIV+CSS代码：

两个DIV并排

.div-a{ float:left;width:49%;border:1px solid #F00}

.div-b{ float:left;width:49%;border:1px solid #000}

第一个DIV盒子

第二个DIV盒子

2)、需要注意是宽度，要想一行两列DIV布局，避免第三个DIV也并排，这里就要设置计算好宽度(这里设置百分比宽度为49%)，三个DIV盒子宽度之和大于父级宽度，两个DIV宽度之和小于父级宽度，即可实现只有2个DIV并排。

3)、第二种情况，float浮动值不同

一个设置为float:left;一个设置为float:right.。

完整HTML源代码：

两个DIV并排

.div-c{ float:left;width:49%;border:1px solid #F00}

.div-d{ float:right;width:49%;border:1px solid #000}

第三个DIV盒子 </