Question

对不起，已经很晚了，我无法解决这个问题......

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

[1][2]

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

[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

从position:absolute类中移除.main为我修复了它.. 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在响应式布局中隐藏在另一个后面

2 个答案: