我有一个包含多个列的表。这些列可以包含不同大小的内容,因此高度会有所不同。
我想要做的是调整单个元素的高度,使其看起来像这个图像:
.table {
display: flex;
background-color: #B2EBF2;
margin: 0 auto;
width: 900px;
}
.column {
display: flex;
flex-direction: column;
flex: 0 1 auto;
width: 33%;
}
.box {
flex: 1 0 auto;
padding: 1em;
box-sizing: border-box;
border: 1px solid #546E7A;
}
.title {
font-size: 2em;
text-align: center;
}
.description {
text-align: center;
}
img {
max-width: 100%;
}

<div class="container">
<div class="table">
<div class="column">
<div class="box title">
Test 1
</div>
<div class="box description">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
</div>
<div class="box image">
<img src="http://unsplash.it/300/320" />
</div>
</div>
<div class="column">
<div class="box title">
Test 2
</div>
<div class="box description">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
</div>
<div class="box image">
<img src="http://unsplash.it/300/300" />
</div>
</div>
<div class="column">
<div class="box title">
Test 3
</div>
<div class="box description">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
</div>
<div class="box image">
<img src="http://unsplash.it/300/280" />
</div>
</div>
</div>
</div>
&#13;
答案 0 :(得分:3)
首先,您应该使用相同尺寸的图像。然后删除flex:1 0 auto;来自.box,但是给flex:1 0 auto;只有.description。 我希望它能满足你的所有要求。