1

我现在有 2 个容器，我希望其中 1 个容器位于另一个容器下方。在这些容器中的每一个中，我都有 2 个并排的 div 由这篇文章提供：是否可以在不使用 CSS 浮动的情况下并排放置两个 div 元素？

<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 网格。但它不断出现在彼此之上。

谢谢

4

7 回答 7

4

现场演示

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

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

于 2013-02-07T05:52:14.527 回答
1

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

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

见小提琴。

于 2013-02-07T05:47:34.060 回答
0

首先，您不能使用 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%;
}
于 2013-02-07T05:51:47.380 回答
0

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

演示

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;
}
于 2013-02-07T05:54:23.157 回答
0 
.container {
    padding: 0 0 0 8%;
    width: 100%; 
}
.one {
width:50%;
float:left;
}
.two {
width:50%;
float:left;
}
于 2013-02-07T05:56:42.473 回答
0

简单的，

.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>
于 2013-02-07T06:01:31.270 回答
0

如果你想使用浮点数，你可以这样做。

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/

于 2013-02-07T06:04:55.593 回答