Question

必须有更好的方法。我有一个顶部有左，中，右部分的网页。但是当屏幕尺寸小于999px宽时，我希望CENTER部分位于顶部，左侧和右侧位于其下方。所以，对于：

<div class="container">
<div class="left">   left content  </div>
<div class="center"> center content</div>
<div class="right">  right content </div>
</div> <!--End Container -->
<div class="below">...

标准CSS只是：

.container { width: 100%; background: yellow; position: relative; clear: all; }
.left {  width:25%; display: inline-block;  height: 200px; background: blue; }
.center { width: 48%; display: inline-block; height: 200px; background: orange; margin: 0 auto; }
.right { width: 25%; display: inline-block;  height: 200px;  background-color: #888; }

然后小于1000px：

@media only screen and (max-width: 999px) {
 .center { width: 100%; top: 0px; z-index: 1; position: absolute; }
 .left { width: 49%;  top: 200px; position: absolute; left: 0px; }
 .right { width: 49%; top: 200px; position: absolute; right: 0px; }

这会产生我需要的效果。然而，下一个内容div，“Below”被绝对div所覆盖，而我所见过的只是在顶部并计算高度。这只是在破解黑客攻击。

有没有办法让我在前面提到的三列栏中的中心div没有搞砸那个容器下方的div？

Answer 1

使用CSS z-index属性。这决定了兄弟节点在z轴的顶部到底部（进入屏幕）在页面上的渲染方式

http://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 2

使用网格

我已经附加了代码，希望您能继续使用它。

它也在我的代码笔（https://codepen.io/omergal/pen/BXqEdx）中

body {
  margin: 0;
}
.container {
  background: lightblue;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
.left {
  height: 200px;
  background: blue;
}
.center {
  height: 200px;
  background: orange;
}
.right {
  height: 200px;
  background-color: #888;
}
.below {
  height: 100px;
  background-color: purple;
}
@media only screen and (max-width: 999px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
  .center {
    grid-area: 1 / 1 / 1 / 3;
  }
  .left {
    grid-area: 2 / 1 / 2 / 2;
  }
  .right {
    grid-area: 2 / 2 / 2 / 3;
  }
}

<div class="container">
  <div class="left"> left content </div>
  <div class="center"> center content</div>
  <div class="right"> right content </div>
</div>
<div class="below">below</div>

CSS列优先级，有或没有绝对定位

2 个答案:

使用网格