无法将一个 div 放置在另一个 div 下方 - 它们现在出现在彼此之上

Question

我现在有 2 个容器，我希望其中 1 个容器位于另一个容器的下方。在每个容器中，我都有 2 个并排的 div，由这篇文章提供：Is it possible to put two div elements side-by-side without using CSS float?

<div id="container">
    <div class="one">testing one</div>
    <div class="two">testing two</div>
</div>
<div id="container">
    <div class="one">testing three</div>
    <div class="two">testing four</div>
</div>

http://jsfiddle.net/zWk2y/14/

我想要一和二、三和四彼此相邻，但一和二在三和四之上，这样就形成了一个 2x2 网格。但它不断出现在彼此之上。

谢谢

Answer 1

现场演示

超文本标记语言

<div id="container1">
  div class="one">testing one</div>
  <div class="two">testing two</div>
</div>
<div id="container2">
   <div class="one">testing three</div>
   <div class="two">testing four</div>
</div>

CSS

#container1, #container2 {
    padding: 0 0 0 8%;
    width: 100%;
}
.one {
    width: 45%;
    position: relative;
    display:inline-block;
}
.two {
    width: 45%;
    position: relative;
    display:inline-block;
}

container您对两个 div使用相同的 id 。ID 应该是唯一的。