我需要對齊彼此相鄰的兩個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