Css 引导网格设置-在固定元素的中间具有自动拟合元素
我正试图找出一种方法，使其中一个网格元素自动填充具有固定宽度的其他元素之间的宽度间隙，因此它们将一起填充其父元素的宽度，无论父元素有多宽。有人能告诉我，如果我想做的是可能的，如果是的话，应该如何正确地做 以下是我试图实现的目标：Css 引导网格设置-在固定元素的中间具有自动拟合元素,css,twitter-bootstrap,grid,Css,Twitter Bootstrap,Grid,我正试图找出一种方法，使其中一个网格元素自动填充具有固定宽度的其他元素之间的宽度间隙，因此它们将一起填充其父元素的宽度，无论父元素有多宽。有人能告诉我，如果我想做的是可能的，如果是的话，应该如何正确地做 以下是我试图实现的目标： 这是一种使用flexbox实现您要求的功能的方法 <style> .row { display: flex; display: -webkit-flex; flex-d
这是一种使用flexbox实现您要求的功能的方法
<style>
.row {
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction: row;
}
.col-left {
flex: 1;
min-width: 120px;
}
.col-center {
flex: 3;
}
.col-right {
flex: 1;
min-width: 120px;
}
</style>
</head>
<body>
<section>
<div class="row">
<div class="col-left" style="background-color: lightgreen; height: 20em;">
</div>
<div class="col-center" style="background-color: violet; height: 20em;">
</div>
<div class="col-right" style="background-color: lightgreen; height: 20em;">
</div>
</div>
</section>
</body>
.行{
显示器：flex；
显示：-webkit flex；
弯曲方向：行；
-webkit柔性方向：行；
}
左上校{
弹性：1；
最小宽度：120px；
}
上校中心{
弹性：3；
}
上校：对{
弹性：1；
最小宽度：120px；
}
这是一个css，但您需要提及剩余宽度的%，以占据整个空间
.container {
width:600px;
height:200px;
border:1px solid;
background:yellow;
display:table-row;
}
.left {
width:200px;
height:20%;
background:red;
overflow:hidden;
display:table-cell;
}
.right {
height:200px;
width:20%;
background:blue;
display:table-cell;
}
.middle {
height:200px;
width: 60%;
background:green;
display:table-cell;
}
如果您将div的宽度硬编码为某些像素，那么您可以使用calc属性并减去容器宽度的100%，以获得结果如果您想要获得
宽度