html - 使用纯 CSS 将元素的高度值设置为一行中的最大值

标签 html css

我有 3 个具有 display:inline-block 样式的 div。我想设置它们的 height 值,使其与最高值匹配。我还想自动设置高度值。我试图直观地展示我想要在下面得到的内容。这可以用纯 CSS 实现吗?

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

最佳答案

使用 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%;
}

关于html - 使用纯 CSS 将元素的高度值设置为一行中的最大值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18358394/

相关文章:

javascript - 如何让append()和appendChild()生成我想要的元素?

javascript - 一个单一文件的 WebAssembly html 演示

css - 如何解决由于 css 冲突导致的布局设计错误?

javascript - 轮播替换鼠标悬停时的图像

html - 如何将内容缩放到屏幕宽度

javascript - gridster 和多个 highcharts 的调整大小和定位问题

css - 更改输入文字的颜色

html - 修饰符元素的子元素?

HTML 表格在 Google Chrome 或 Safari 打印时被截断(太宽)

javascript - 这是如何制作的(WordBall,透明四面体)