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

Question

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

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

[1][2]

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

[1]
[2]

在我添加第二组之前这一切正常：

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

然后，当视口宽度缩小到 400px 以下时，[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%;
}
}

Answer 1

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

Answer 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>

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

Div gets hidden behind another in responsive layout

html

css

position

flexbox

responsive-design