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

html-css025

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 class="wrapper">

<div></div><!-- 此处的注释为去掉换行符的影响

--><div></div><!--

--><div></div>

</div>

.wrapper {

width: 100% /* 也可以固定宽度 */

height: 200px

}

.wrapper >div {

display: inline-block /* 如需支持IE8以下版本，用浮动来做 */

width: calc(100% / 3) /* 此处运用了一个css3的表达式，将div三等分，IE8及以上可以支持，当然也可以根据需要设置固定值 */

width: -webkit-calc(100% /3)

width: -moz-calc(100% / 3)

height: 100%

}

以上经亲自测过，IE8+、chrome、firefox表现良好。