您可以使用 布置物品:@H_403_1@
#parent {
display: flex;
}
#narrow {
width: 200px;
background: lightblue;
/* Just so it's visible */
}
#wide {
flex: 1;
/* Grow to rest of container */
background: lightgreen;
/* Just so it's visible */
}
<div id="parent">
<div id="wide">Wide (rest of width)</div>
<div id="narrow">Narrow (200px)</div>
</div>
这基本上只是刮擦flex@R_241_2419@的表面。Flex@R_241_2419@可以做很多令人惊奇的事情。@H_403_1@
对于较旧的浏览器支持,可以使用CSS 和 属性来解决它。@H_403_1@
#narrow {
float: right;
width: 200px;
background: lightblue;
}
#wide {
float: left;
width: calc(100% - 200px);
background: lightgreen;
}
<div id="parent">
<div id="wide">Wide (rest of width)</div>
<div id="narrow">Narrow (200px)</div>
</div>