我有一个包含如下三个元素的标题:
#container {
width: 100%;
}
#container div {
display: inline-block;
text-align: center;
}
#container #left,
#container #right {
width: 50px;
}
<div id="container">
<div id="left">L</div>
<div id="center">CENTER</div>
<div id="right">R</div>
</div>
我想要的是让它具有响应性,以便它覆盖整个窗口的宽度,但是侧面 div(左侧和右侧)需要保持相同的大小,因此唯一需要更改大小的是中心一。我如何在 CSS 中实现这一点?
最佳答案
例如
#container {
display: flex;
}
#container div {
display: inline-block;
text-align: center;
flex: 1 1;
}
#container #left,
#container #right {
flex: 0 0 50px;
background-color: rgba(0,0,0,.1);
}
<div id="container">
<div id="left">L</div>
<div id="center">CENTER</div>
<div id="right">R</div>
</div>
关于css - 响应式设计,两侧有两个固定大小的 div,中间有一个用于其余部分的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38850884/