Question

如果我有两个div彼此相邻。在调整浏览器大小时，如何让它们相互影响？到目前为止，我在stackoverflow上找到了这个例子，它是彼此相邻的两个div。如何在浏览器调整大小时将它们置于彼此之下？

＆＃13;

#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 */
}

＆＃13;

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

＆＃13;

Answer 1

你可以简单地使用这样的媒体查询：

＆＃13;

#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 */
}

@media all and (max-width:800px) {
  #wide,
  #narrow {
    flex: 0 0 100%;
  }
  #parent {
    flex-wrap: wrap;
  }
}

＆＃13;

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

＆＃13;

只需将值800px更改为您需要的值（我用它来显示结果）

使div响应并为显示新闻设计样式

1 个答案: