CSS两个div彼此相邻

• Z时代
• 2024-01-10
• 分类：问答

我要两个<div>紧挨着。右边<div>大约200px；并且左侧<div>必须填满屏幕的其余宽度？我怎样才能做到这一点？

回答：

您可以使用 布置物品：

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

以上是 CSS两个div彼此相邻 的全部内容， 来源链接： utcz.com/qa/425953.html