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()。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

#parent {
  display: grid;
  grid-template-columns: 1fr 200px;
}

#narrow {background: lightblue;}
#wide {background: lightgreen}
#m {background: green}

＆＃13;

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

＆＃13;

Answer 2

您可以使用calc函数使其宽度与宽div相同：

＆＃13;

#parent {
  display: flex;
  flex-wrap: wrap;
  width:100%;
}

#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}

#wide {
  flex-grow: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

#m {
  width: calc(100% - 200px);
  background: blue;
}

@media all and (max-width:800px) {
  #wide,
  #narrow,
  #m {
    width: 100%;
  }
}

＆＃13;

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

＆＃13;

Answer 3

#parent {
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

#narrow {
  background: lightblue;
  /* Just so it's visible */
  flex: 1 90%;
}

#wide {
  flex: 1 10%;
  /* 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>

在div下使div具有相等的宽度

3 个答案: