html三个div相同高度,css实现并列的两个div高度一致的三种方法

1. 设置display：table

html>

Document

.box{

width: 200px;

display:table;

margin:0 auto;

}

.one{

width: 100px;

background-color: pink;

display: table-cell

}

.two{

width:100px;

background-color: red;

display:table-cell;

}

最新的 才不是最近好的怎么办的呢对不

554

2.利用padding和margin

html>

Document

.box{

width: 200px;

margin:0 auto;

overflow: hidden;

}

.one{

width: 100px;

background-color: pink;

padding-bottom: 100%;

margin-bottom: -100%;

float: left;

}

.two{

width:100px;

background-color: red;

padding-bottom: 100%;

margin-bottom: -100%;

float: left;

}

最新的 才不是最近好的怎么办的呢对不

554

3. 设置display: -webkit-box

html>

Document

.box{

width: 200px;

margin:0 auto;

display: -webkit-box;

}

.one{

width: 100px;

background-color: pink;

}

.two{

width:100px;

background-color: red;

}

最新的 才不是最近好的怎么办的呢对不

554