html中表格平均分的命令,CSS:div平均分几块

html&＃xff1a;

css:

法一&＃xff1a;浮动布局&＃43;百分比

.container{

overflow: hidden;

zoom:1;

width:500px;

height:200px;

border:1px solid red;

}

.childDiv{

float:left;

width:33.3%;

height:100%;

border:1px solid red;

background:greenyellow;

}

法二&＃xff1a;行内元素&＃43;百分比

.container{

font-size: 0;

overflow: hidden;

width:500px;

height:200px;

border:1px solid lightblue;

}

.childDiv{

display: inline-block;

width: 33.3%;

height:100%;

border:1px solid gray;

}

法三&＃xff1a;父元素 display:table &＃43; 子元素 display:table-cell

.container{

width:500px;

height:200px;

display: table;

border:1px solid lightblue;

}

.childDiv{

display: table-cell;

border:1px solid gray;

}

法四&＃xff1a;css3 display:flex

.container{

width:500px;

height:200px;

display: flex;

border:1px solid lightblue;

}

.childDiv{

flex:1;

border:1px solid gray;

}