Question

我现在有两个容器，我希望其中一个容器低于另一个容器。在每个容器中，我有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

<强> LIVE DEMO

HTML

<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;
}

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

Answer 2

使用<div class="container">并应用以下CSS：

.one {
    width: 45%;
    display: inline-block;
}
.two {
    width: 45%;
    display: inline-block;
}

请参阅fiddle。

Answer 3

首先你不能使用id作为重复，你可以像这样改变它

HTML

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

CSS

.container {
padding: 0 0 0 8%;
width: 100%;

}

.containers{
padding: 0 0 0 8%;
width: 100%;

}


.one {
width: 45%;
position: relative;
left: 0;
}

.two {
width: 45%;
position: relative;
left: 50%;
}

Answer 4

您的标记几乎没有问题。请参阅以下演示和代码：

DEMO

HTML：

<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 {
background-color:yellow;
}
#container2
{
    background-color:orange;
}
.one,.two
{
    display:inline-block;
    width:49%;
    border:1px solid;
    height:30px;
}

Answer 5

.container {
    padding: 0 0 0 8%;
    width: 100%; 
}
.one {
width:50%;
float:left;
}
.two {
width:50%;
float:left;
}

Answer 6

简单，

.container {
    padding: 0 0 0 8%;
}
.inner {
    float:left;
    width:45%;
}

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

Answer 7

如果你想使用花车，你可以这样做。

<强> HTML：

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

<强> CSS：

.container {
    padding: 0 0 0 8%;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.one {
    width: 45%;
    position: relative;
    left: 0;
    float: left;
}
.two {
   width: 45%;
   position: relative;
   float:left;
}

您不能拥有两个具有相同ID的元素。用{替换<div id="container"> <div class="container">

示例：http://jsfiddle.net/hVgQv/

不能将一个div放在另一个下面 - 它们现在彼此重叠

7 个答案: