有一个 3 列的布局,当在移动设备上时,希望第 3 列低于第 2 列,并且不低于第 1 列的高度。第 2 列的高度可变,可以小于照片。
我的布局是这样的。
.container {
display: flex;
}
.left {
flex: 0 0 150px;
}
.middle {
flex: 1;
}
.right {
flex: 0 0 225px;
}
@media (max-width: 768px) {
.right {
flex: 1 100%;
padding-left: 150px;
}
}
<div class="container">
<div class="left">a</div>
<div class="middle">b</div>
<div class="right">c</div>
</div>
padding-left 将 .right 定位在 .middle 下方,但低于 .left 容器的底部。我想获取屏幕截图中的第二个 secnario,以便在小型设备上右侧列位于中间列的正下方
最佳答案
简单地包裹middle
和right
,使wrapper
成为一个flex容器,然后,在较窄的屏幕上,改变它的 flex-direction
到 column
此外,在较窄的屏幕上,我们需要将container
设置为align-items: flex-start
,所以left
/wrapper
高度基于其内容。
堆栈片段
.container, .wrapper {
display: flex;
}
.left {
flex: 0 0 150px;
}
.middle, .right {
flex: 1;
}
.wrapper {
flex: 0 0 225px;
}
@media (max-width: 768px) {
.container {
align-items: flex-start;
}
.wrapper {
flex-direction: column;
}
}
.left, .middle, .right {
border: 1px solid gray;
}
<div class="container">
<div class="left">a</div>
<div class="wrapper">
<div class="middle">b, made this higher<br>to show how it wraps</div>
<div class="right">c</div>
</div>
</div>
关于html - 如何将 div 与 flex 对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47034728/