css里，怎样使多个div元素并列一行？

html-css012

css里，怎样使多个div元素并列一行？,第1张

使多个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是块状元素，按照默认文档流占一行，所以为了使多个DIV处于同一行，可以用两种方式：

将div改为行内元素

display:inline-block

改变默认的文档流

float:left

示例如下：

创建Html元素

<div class="test test1">

方式一：display:inline-block<br>

<div></div><div></div><div></div>

</div>

<div class="test test2">

方式二：float:left<br>

<div></div><div></div><div></div>

</div>

设置css样式

div.test{width:400pxheight:100pxmargin:10pxborder:4px solid #ebbccb}

div.test1 div{

width:100pxheight:50px

border:2px solid #ccc

margin:10px

display:inline-block /*注意此处采用行内元素的方式*/

}

div.test2 div{

width:100pxheight:50px

border:2px solid #ccc

margin:10px

float:left          /*注意此处改变默认文档流，采用浮动的方式*/

}

观察显示效果