用纯CSS怎么让3个或更多的DIV处于同一行？

html-css027

用纯CSS怎么让3个或更多的DIV处于同一行？,第1张

用纯CSS让3个或更多的DIV处于同一行方法：

可以利用float属性实现多个div处于统一行。

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

还可以利用display：inline；将div强制转换为内联元素也可实现多个div处于同一行。

使多个div并列一行的方法是将div的css样式设知定为浮动方式：float:left或者是设定为inline-block行内块元道素【ie6下设置为inline行内元素已保证兼容性】。版

前提是几个div宽度总和不能超出父元素的宽度。

<div

class="d1

clearfix">

<div

class="d1-1"></div>

<div

class="d1-2"></div>

<div

class="d1-3"></div>

</div>

css:

.d1{

width:1200px

margin:0

auto

overflow:hidden}

.d1

div{

float:left/*将块元素div设定权为左浮动*//*display:inline-block

_display:inline*/

width:400px

height:150px

background:#ccc}

实现两个div在同一行显示有多种方法，可以用设置浮动——用float，还可以用绝对定位position，等等。

这里只简单介绍使用浮动实现方法。

方法一：

<div style="float:left"></div><div></div>

方法二：

<div style="float:left"></div><div style="float:left"></div>

方法三：

<div style="float:left"></div><div style="float:right"></div>

这三种方法均可实现div同行显示。