Question

前言：我无法更改HTML。

为了更好地解释我的问题，我在下面提供了一个插图。基本上，我有两行div - 第一行有内容，第二行在内容下面有一个按钮。

我想让页面响应，因此带按钮的div总是低于其对应的内容div，但额外的容器div正在证明是一种挑战。有什么想法吗？

What I have (above) and what I want (below).

这是HTML代码：

<div class="choice-section">
    <div id="choice_1" class="choice odd" style="margin-top: 242px;">
        <div class="content">asdf</div>
    </div>
    <div id="choice_2" class="choice even" style="margin-top: 322px;">
        <div class="content">asdf</div>
    </div>
</div>
<div>
    <div class="vote-choice odd">
        <a class="vote btn" href="javascript:void(null)" choice="1">Vote</a>
    </div>
    <div class="vote-choice even">
        <a class="vote btn" href="javascript:void(null)" choice="2">Vote</a>
    </div>
</div>

Answer 1

我强烈建议您查看Bootstrap's网格和列系统，以便轻松实现这一目标。这个框架将使响应式设计变得轻而易举。

你可以看到example与你想要在Plunker中实现的非常相似的东西我很快就会把它放在一起

CSS：

.blue {
  background-color:blue;
  height:200px;
}

.red {
  background-color:red;
  height:200px;
}

.purple {
  background-color:purple;
  height:200px;
}

.green {
  background-color:green;
  height:200px;
} here

HTML：

<div class="container">
<div class="row">
  <div class="col-sm-3">
    <div class="red">
    </div>
  </div>
  <div class="col-sm-3">
    <div class="blue">
    </div>
  </div>
  <div class="col-sm-3">
    <div class="purple">
    </div>
  </div>
  <div class="col-sm-3">
    <div class="green">
    </div>
  </div>
</div>

两个div，每个div在两个div中 - 如何使用CSS更改堆叠顺序（用于响应）？

1 个答案: