我怎样才能水平alignment两个div？
我需要将两个divalignment，这样每个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>
<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>
必须使用清除，以防止浮动错误（外部高度翘曲）。
style="clear:both; font-size:1px;
现在，我们可以使用一些flexbox来alignment这些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>
你需要漂浮在所需的方向，例如left或right 。
把它们都包装在一个容器里，像这样：
.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>
如果你有两个div，你可以使用这个在同一行中alignment彼此相邻的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>
为每个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> <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>
为了您的目的，我宁愿使用位置而不是浮动：
http://jsfiddle.net/aas7w0tw/1/
使用相对位置的父母：
position: relative;
和绝对位置的孩子：
position: absolute;
奖金，你可以更好地驱动你的组件的尺寸。
