html - 使 div 在 div 下等宽

Question

我有这三个 div，我添加了一个 ID 为 m 的 div 我需要它在具有相同宽度的名称为 wide 的 div 下。感谢您的帮助。

这是我的代码。

#parent {
  display: flex;
}

#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
  width: 100%;
}

#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

#m {}

@media all and (max-width:800px) {
  #wide,
  #narrow {
    flex: 0 0 100%;
  }
  #parent {
    flex-wrap: wrap;
  }
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
  <div id="m">m</div>
</div>

Answer 1

如果您可以在 narrow 元素上使用固定宽度，则可以使用 calc()。

#parent {
  display: flex;
  flex-wrap: wrap;
}
#narrow {
  width: 200px;
  background: lightblue;
}
#wide {
  flex: 0 0 calc(100% - 200px);
  background: lightgreen;
}
#m {
  flex: 0 0 calc(100% - 200px);
  background: green;
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
  <div id="m">m</div>
</div>

您也可以为此使用 CSS 网格布局。

#parent {
  display: grid;
  grid-template-columns: 1fr 200px;
}

#narrow {background: lightblue;}
#wide {background: lightgreen}
#m {background: green}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
  <div id="m">m</div>
</div>