Div 在响应式布局中隐藏在另一个后面答案

【问题标题】：Div gets hidden behind another in responsive layoutDiv 在响应式布局中隐藏在另一个后面
【发布时间】：2016-03-12 18:23:34
【问题描述】：

抱歉，来晚了，我想不通...

我有一个响应式 div，垂直分成两个。这些设置为水平并排显示内联：

[1][2]

除非视口缩小到 400 像素以下，否则它们会垂直堆叠 - 像这样：

[1]
[2]

在我添加第二组之前，这可以正常工作：

[1][2]
[3][4]

然后，当视口缩小到 400 像素以下时，[2] 隐藏在 [3] 后面：

[1]
[3]
[4]

这是一个更清晰的演示：http://jsfiddle.net/c14n6ym4/。我错过了一些东西，有人可以帮忙吗？感谢您的宝贵时间。

CSS：

.wrapper {
width: 100%;
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 40%;
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
font-size: 0;
}
#left,
#right {
font-family: serif;
font-size: 20vw;
display: inline-flex;
width: 50%;
height: 100%;
float: left;
}
@media (max-width: 400px) {
#left,
#right {
font-size: 40vw;
width: 100%;
}
.wrapper:after {
padding-top: 80%;
}
}

【问题讨论】：

从.main 类中删除position:absolute 为我修复了它。jsfiddle.net/pwm4hjj6
您不应该为多个元素使用相同的id。将classes 用于right 和left。
谢谢@Jonathan，我会更新的。谢谢@Pete - 解决了覆盖问题，但position:absolute 可以保持纵横比（stackoverflow.com/questions/12121090/…），没有它，div 似乎有 100% 的高度......

标签： html css responsive-design position flexbox

【解决方案1】：

从.main 类中删除position:absolute 为我修复了它.. jsfiddle.net/pwm4hjj6

【讨论】：

【解决方案2】：

更新您的标记结构并将您的 id 更改为类。

http://jsfiddle.net/partypete25/c14n6ym4/1/

<div class="wrapper">
  <div class="main">
    <div class="left">
      <p>1</p>
    </div>
    <div class="right">
      <p>2</p>
    </div>
    <div class="left">
      <p>3</p>
    </div>
    <div class="right">
      <p>4</p>
    </div>    
  </div>
</div>

【讨论】：

啊，非常感谢！我担心从 wrapper 中删除 inline-block 会导致问题，但它看起来还不错 - 干杯。