您可以使用 flexbox 布置物品：

#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>

这基本上只是刮擦flexbox的表面。Flexbox可以做很多令人惊奇的事情。

对于较旧的浏览器支持，可以使用CSS float 和 width 属性来解决它。

#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>