您可以使用 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 浮动 和 宽度 属性来解决它。

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