2

我有 3 个display:inline-block样式的 div。我想设置它们的height值，使其与具有最高值的值匹配。我还想自动设置高度值。我试图在视觉上展示我想要得到的东西。纯CSS可以做到这一点吗？

-----    -----    -----          -----    -----    ----- 
|   |    |   |    |   |          |   |    |   |    |   | 
-----    |   |    |   |    ==>   |   |    |   |    |   |
         -----    |   |          |   |    |   |    |   |
                  -----          -----    -----    -----
4

2 回答 2

4

使用 CSS，您可以将内部 div 设置为display: table-cell，将外部 div 设置为display: table

演示：http: //jsfiddle.net/maniator/C2dNu/

HTML：

<div id='out'>
    <div class='red'></div>
    <div class='blue'></div>
    <div class='green'></div>
</div>

CSS：

.red { 
    background: red;
    height: 60px;
}
.blue { 
    background: blue;
    height: 160px; 
}
.green {
    background: green;
    height: 80px; 
}
#out {
    display: table;
    width: 500px;
}

#out > div {
    display: table-cell;
    width: 33%;
}
于 2013-08-21T13:20:08.850 回答
-1

使用 JS，可以使用Equalize.js来完成。我不知道纯 CSS 解决方案。

于 2013-08-21T13:13:37.097 回答