DIV+CSS 如何把一个层平分四份？

html-css012

DIV+CSS 如何把一个层平分四份？,第1张

.main{width:1000px}

.cell{width:25%float:leftheight:200px}

.c1,c3{background-color:#ccc}

.c2,c4{background-color:#e0e0e0}

<div class="main">

<div class="cell c1"></div>

<div class="cell c2"></div>

<div class="cell c3"></div>

<div class="cell c4"></div>

</div>

这是横向平分的例子， 你说的是面积平分吗？还是纵向平分？

用百分比来做，比如html如下

<div class="demo">

    <div class="box">1</div>

    <div class="box">2</div>

    <div class="box">3</div>

</div>

css如下

.demo{width: 1000pxheight: 300px}

.box{width: 100%height: 33.3%}

效果就是demo被box均分为3个宽1000高100的三个块，当然，3个33.3%是不能完全达到百分百，但在显示界面基本看不出什么了

给ul设置一个固定的宽度就可以了：

#container #menu ul{

width:1000px

list-style:none

margin:0 auto

padding:0

}

#container #menu li{

text-indent:60px

float: left

margin:11px 20px 20px 0

}