我需要对齐彼此相邻的两个div，使每个包含一个标题和物品清单，类似于：如何水平对齐两个div？
<div>
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div>
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
这是非常容易做到的表，但我不希望使用表格。我怎样才能做到这一点？
浮动的div的父容器，和风格它像这样：
.aParent div {
float: left;
clear: none;
}<div class="aParent">
<div>
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div>
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
</div>总结他们都在一个容器中，像这样：
.container{
float:left;
width:100%;
}
.container div{
float:left;
}<div class='container'>
<div>
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div>
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
</div>容器本身不必浮动。 – 2014-07-14 17:02:05
您需要在要求的方向float the divs例如left或right。
<html>
<head>
<style type="text/css">
#floatingDivs{float:left;}
</style>
</head>
<body>
<div id="floatingDivs">
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div id="floatingDivs">
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
</body>
</html>
一个id只能使用一次。 – 2014-07-14 16:58:02
<div>
<div style="float:left;width:45%;" >
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div style="float:right;width:45%;">
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div style="clear:both; font-size:1px;"></div>
</div>
清除必须使用，以防止浮子的错误（外层div的高度翘曲）。
style="clear:both; font-size:1px;
最后的嵌套div做什么？为什么'明确：两个'？为什么'font-size：1px'？ – Cheeso 2010-03-10 13:29:40
清除浮标。我相信“font-size：1px”是一个IE兼容性的东西。我可能是错的。 – 2010-03-10 15:18:18
添加类各的div：
.source, .destination {
float: left;
width: 48%;
margin: 0;
padding: 0;
}
.source {
margin-right: 4%;
}<div class="source">
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div class="destination">
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>这是一个通用的解决方案百分比 - 使用基于像素的宽度通常是更可靠。您可能也想要更改各种边距/填充尺寸。
您也可以选择换行HTML的div容器，并使用这个CSS：
.container {
overflow: hidden;
}
这将确保后续内容围绕浮动元素不换行。
你的目的，我宁愿使用位置，而不是浮动：
http://jsfiddle.net/aas7w0tw/1/
使用父相对位置：
position: relative;
和孩子绝对位置：
position: absolute;
在奖金方面，您可以更好地推动维度您的组件的sions。
，如果你有两个div，你可以用它来对准同一行中彼此相邻的div：
#keyword {
float:left;
margin-left:250px;
position:absolute;
}
#bar {
text-align:center;
}<div id="keyword">
Keywords:
</div>
<div id="bar">
<input type = textbox name ="keywords" value="" onSubmit="search()" maxlength=40>
<input type = button name="go" Value="Go ahead and find" onClick="search()">
</div>现在，我们可以使用一些flexbox对准那些div的。
.container {
display: flex;
}<div class="container">
<div>
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div>
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
</div>谢谢，不知道'display：flex'。添加了链接，以便人们可以轻松看到CSS3背景。 – akauppi 2016-08-02 13:46:17
如果你给一个元素的浮动，这是多余的，充其量也给它一个明确的'：none'。 – 2014-07-14 17:00:23
当一些较旧的浏览器并不总是使用浮动执行'clear：none'时，这被回答了。 – Robusto 2015-09-16 13:09:23