首页 > 文章 > web前端 > CSS中多个div盒子并排同行显示的实例代码分享

CSS中多个div盒子并排同行显示的实例代码分享

黄舟原创: 2017-07-22 10:32:2212340浏览

1、div 两列一行两列DIV布局如何实现，div 两列并排一行两列DIV布局教程解决篇
实现两个DIV盒子并排，一行只显示两列DIV布局，使用width宽度+float浮动即可实现一行显示两列DIV布局。
第一种情况，float浮动相同
让两个div盒子的float值相同，比如都设置float:left或float:right，宽度设置合适即可。这里我们通过案例实现一行两列DIV布局。
1）、完整实例DIV+CSS代码：

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

2）、需要注意是宽度，要想一行两列DIV布局，避免第三个DIV也并排，这里就要设置计算好宽度（这里设置百分比宽度为49%），三个DIV盒子宽度之和大于父级宽度，两个DIV宽度之和小于父级宽度，即可实现只有2个DIV并排。
3）、第二种情况，float浮动值不同
一个设置为float:left;一个设置为float:right.。
完整HTML源代码：

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

2、DIV横向排列_CSS如何让多个div盒子并排同行显示，如何让多个div盒子并排同行div横向排列显示呢？
我们先设置3个div盒子对象，什么css样式都不设置看看效果。代码如下：
未同行显示div截图
三个div盒子均独占一行显示
div盒子本身默认样式属性是独占一行，而解决div独占一行方法通常有两种，一种为设置浮动，另外一种为设置display样式。接下来为大家通过文章+图片+案例方法介绍解决div盒子对象并排横向排列且同行显示方法。
一、使用css float并排显示
我们对div设置一个float浮动属性即可解决不并排显示，只要你的并排div盒子总宽度小于或等于最外层盒子宽度即可实现多个div对象并排显示。
加float浮动实现div盒子并排显示
加float浮动实现多个div并排显示
这里我们对div通设一个浮动，当然实际使用时候，要通排显示div对象的加入css类，我们就对要同行显示css选择器设置浮动。避免其它不需要设置的也被加入浮动样式。
二、使用css display同行显示
我们加入display:inline即可解决实现同行并排显示div盒子对象。为了区别其他不需要设置横向排列显示div盒子对象，我们对相邻需要同排显示的div盒子统一加粗css类，css命名为".div-inline"。
CSS代码如下：

.div-inline{ display:inline}

Html代码片段：

<div class="div-inline">第一个div盒子</div> 
<div class="div-inline">第二个盒子</div> 
<div class="div-inline">第三个盒子</div>

三、总结：无论是float浮动还是display实现并排显示，要想并排显示首先总宽度要小于或等于对象上级宽度，这样才能并排显示实现横向排列排版布局。

以上是CSS中多个div盒子并排同行显示的实例代码分享的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：ccs透明属性和背景透明继承方法实例详解下一篇：css中如何使块级元素能够同行显示？

查看更多