我有一个 2 列容器。在左侧,有一个图像。在右侧,我有 2 <p>
元素。我想定位一个 <p>
元素在顶部,另一个在容器底部。
我尝试使用 flexblox,align-items
拉伸(stretch),但这不起作用。虽然flex-start
和 flex-end
确实有效。
这甚至可以用 flexbox 实现吗?
.container {
display: flex;
align-items: stretch;
}
img {
display: block;
width: 100%;
}
.element-box {
height: 100%;
}
<div class="container">
<div>
<img src="https://placeimg.com/640/480/nature">
</div>
<div class="element-box">
<p>Should be on Top</p>
<p>Should be on Bottom</p>
</div>
</div>
最佳答案
你可以让你的 element-box
成为一个 column flexbox
并且给 justify-content: space-between
.同时从中删除 height: 100%
。
请看下面的演示:
.container {
display: flex;
align-items: stretch;
}
img {
display: block;
width: 100%;
}
.element-box {
display: flex;
flex-direction: column;
justify-content: space-between;
}
<div class="container">
<div>
<img src="https://placeimg.com/640/480/nature">
</div>
<div class="element-box">
<p>Should be on Top</p>
<p>Should be on Bottom</p>
</div>
</div>
关于html - Flexbox 对齐元素拉伸(stretch)问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46096220/