前提是几个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}
比如.s1{样式}
.s2{样式}
.s3{样式}
<div class="s1 s2 s3"
以上不就并列了啊。要是这样情况,有冲突定义,以后者为准,要是都没有,样式全生效。
要想并列有三种写法:
浮动。float:left要设置父元素高度或者设置overflow:hidden否则会出现高度塌陷
定位。position:absolute设置父元素position:relative,子元素为absolute,通过top和left调整每个子元素相对于父元素的位置
改变div模块,将并列的div设置为display:inline-block;这样每个元素都一排了
如果并列1和3用的很多,设置简单,效果明显,2这种一般情况是不会用的,设置需要调整每个元素的top和left,麻烦费事。1和3根据不同情况可以自由选择。