Html 将两个 div 放在同一水平面上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10032537/
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
Placing two divs at same horizontal level
提问by Sumit Sinha
I need to put two div elements at the same horizontal level. Doing the way I have done makes the second one get displayed under the first. I want to place them in a way that they cross over each other while transition.
我需要将两个 div 元素放在同一水平面上。按照我所做的方式使第二个显示在第一个下方。我想以一种在过渡时相互交叉的方式放置它们。
Edit 1- Herewhen the button is pressed to swap their classes, divs move up and down.
编辑 1-在这里，当按下按钮来交换它们的类时，div 会上下移动。
#aaidi,#aaidi3 {
-webkit-transition: margin-left 1s ease-in-out;
-moz-transition: margin-left 1s ease-in-out;
-o-transition: margin-left 1s ease-in-out;
transition: margin-left 1s ease-in-out;
}
.left {
margin-left: 45%;
border: 1px solid green ;
width: 20px;
height: 4px;
background: #FF0000;
} // similar for right with margin-left:55%
......
<tr>
<td colspan=3>
<div id="aaidi" class="left">
</div>
<div id="aaidi3" class="right">
</div>
</td>
</tr> // after this there is a button pressing whom changes the class of both divs.
回答by James Johnson
You can achieve this using the floatproperty:
您可以使用以下float属性实现此目的：
<style type="text/css">
div.container {
margin: 15px;
}
div.left, div.right {
float: left;
padding: 10px;
}
div.left {
background-color:orange;
}
div.right {
background-color: yellow;
}
</style>
<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
See this jsFiddlefor a demonstration. Here's the output:
请参阅此jsFiddle进行演示。这是输出：
回答by Justin Pihony
Use a span, or you can set the style to display:inline-block
使用 a span，或者您可以将样式设置为display:inline-block
回答by Kevin Bowersox
I believe you would like to float the divs
我相信你想浮动 div
.float-left{
float:left;
}
<div id="aaidi" class="float-left left"></div>
<div id="aaidi3" class="float-left right"></div>
If the right div is still being viewed as a 'block' element then it will take up the entire row. Both elements need to be floated, or specific widths need to be set.
如果右侧 div 仍被视为“块”元素，则它将占据整行。两个元素都需要浮动，或者需要设置特定的宽度。
回答by w3uiguru
see fiddle for code and demo
请参阅小提琴代码和演示
fiddle: http://jsfiddle.net/ht6M9/
小提琴：http: //jsfiddle.net/ht6M9/
回答by zigoHymano
Just float all divs left if you require them to be side by side.
如果您需要它们并排放置，只需将所有 div 浮动。
Depending on contents of div, you may need to assign a width to each class too.
根据 div 的内容，您可能还需要为每个类分配一个宽度。
