Html 不能将一个 div 放在另一个下面 - 它们现在出现在彼此之上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14744443/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can't place one div below another - they appear on top of each other now
提问by user1527634
I have 2 containers right now and I want 1 of these containers to be below the other. In each of these containers, I have 2 side by side div's courtesy of this post: Is it possible to put two div elements side-by-side without using CSS float?
我现在有 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>
I want to one&two, three&four next to each other but one&two on top of three&four so it makes a 2x2 grid. But it keeps appearing on top of each other.
我想要一个&两个，三个&四个彼此相邻，但是一个&两个在三个&四个之上，所以它形成了一个2x2的网格。但它不断出现在彼此之上。
Thanks
谢谢
回答by Muhammad Usman
HTML
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
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;
}
You are using the same id containerfor both div's. Id should be unique.
您container对两个 div使用相同的 ID 。ID 应该是唯一的。
回答by Antony
回答by Sanjay
First you cant use id as repeating can you please change it like this
首先你不能使用 id 作为重复，你可以像这样改变它吗
HTML
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
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%;
}
回答by Cdeez
You have few issues with your markup. See the below demo and code:
您的标记几乎没有问题。请参阅下面的演示和代码：
HTML:
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:
CSS：
#container1 {
background-color:yellow;
}
#container2
{
background-color:orange;
}
.one,.two
{
display:inline-block;
width:49%;
border:1px solid;
height:30px;
}
回答by Pranali Desai
.container {
padding: 0 0 0 8%;
width: 100%;
}
.one {
width:50%;
float:left;
}
.two {
width:50%;
float:left;
}
回答by Dan
Simple,
简单的，
.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>
回答by Tuan
If you wanted to use floats, you can do it this way.
如果你想使用浮动，你可以这样做。
HTML:
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:
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;
}
You can't have two elements with the same id. Replaced <div id="container">with
<div class="container">
不能有两个具有相同 id 的元素。替换<div id="container">为
<div class="container">
Example: http://jsfiddle.net/hVgQv/
