您的位置:首页 > div css问集 > 【 返回上一页

div 两列 两个DIV并列显示CSS如何实现

div 两列并排 一行两列DIV布局教程解决篇

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

第一种情况,float浮动相同
让两个div盒子的float值相同,比如都设置float:leftfloat:right宽度设置合适即可。这里我们通过案例实现一行两列DIV布局。

1、完整实例DIV+CSS代码:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>两个DIV并排</title> 
  6. <style> 
  7. .div-a{ float:left;width:49%;border:1px solid #F00} 
  8. .div-b{ float:left;width:49%;border:1px solid #000} 
  9. </style> 
  10. </head> 
  11. <body> 
  12. <div class="div-a">第一个DIV盒子</div> 
  13. <div class="div-b">第二个DIV盒子</div> 
  14. </body> 
  15. </html> 

2、实例截图


一行两列DIV并排效果截图

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

第二种情况,float浮动值不同
一个设置为float:left;一个设置为float:right.。

1、完整HTML源代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>两个DIV并排</title> 
  6. <style> 
  7. .div-c{ float:left;width:49%;border:1px solid #F00} 
  8. .div-d{ float:right;width:49%;border:1px solid #000} 
  9. </style> 
  10. </head> 
  11. <body> 
  12. <div class="div-c">第三个DIV盒子</div> 
  13. <div class="div-d">第四个DIV盒子</div> 
  14. </body> 
  15. </html> 

2、两列并排DIV实例截图


不同float浮动值实现一行两列div布局实例截图

在线演示查看案例

完整DIV+CSS实例打包下载:

相关CSS教程DIV横向排列

相关标签: 两列
如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/wenti/588.shtml

日期:2013-07-31 18:29:11 来源:www.thinkcss.com 作者:ThinkCSS

热门点击