我有以下情况:
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
我需要将三个潜水(左、中、右)排成一排。左右 div 必须占据中心 div 之后剩下的所有空白空间(左边 50% 的空白空间,右边 50% 的空白空间)。中心 div 必须拉伸(stretch)到最大值,但它必须具有 max-width:1000px。因此,例如,如果屏幕宽度 <1000,则中心 div 必须占据所有空间。所以,center div 可能的宽度是从 0 到 1000px。没有js怎么办?
最佳答案
使用 flexbox
和 center
div 能够shrink
仅从 1000px 的 flex-basis
。
这确保了 center
将拉伸(stretch)到最大 1000px
下面的片段:
.container {
display: flex;
}
.container > div {
height: 100px;
border: 1px solid black;
}
.left,
.right {
flex: 1;
}
.center{
flex: 0 1 1000px;
}
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
关于html - 左流体 div,中心拉伸(stretch)到最大宽度 div,右流体 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39226459/