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

html-css07

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}

首先明确一点就是，他们的确不是并列关系，float确实让第二个div飘起来了，而且占据了第一个div的位置。不信的话你可以给第二个div加一个背景颜色看看就会很清楚了。代码如下：

<div style="float:leftborder:1px solid">1</div>

<div style="border:1px solidbackground-color:#CCCCCC">2<div>

第二个div的位置的确是占据了第一个div的位置。第二个div的位置是从最左边开始的，也就是说它和第一个div的左边是重叠的。绝对不是和第一个div是并列关系。