HTML，在同一行的兩邊對齊兩個元素

Question

不使用表格，如何在同一行中對齊兩個元素（一個在左邊，另一個在右邊）？

Answer 1

HTML 內容：

<div class='container'>
  <div class="align-left">left</div>
  <div class="align-right">right</div>
</div>

樣式，如下所示：

.container{ width:100%; }    
.align-left{ float: left;width:50%; }
.align-right{ float: right;width:50%; }

Answer 2

使用浮動：對； 和浮動：左；

Answer 3

如果您希望它們在同一行，您可以使用 INLINE 或 INLINE-BLOCK。

 #element1 { display: inline-block; margin-right: 10px; width: 200px; background-color: red; } #element2 { display: inline-block; width: 200px; background-color: red; }

 <div id="element1">element 1 markup</div> <div id="element2">element 2 markup</div>

Answer 4

試試這個：

<div class="align-left">
  left
</div>
<div class="align-right">
  right
</div>

和CSS：

.align-left{
   float: left;
 }

.align-right{
   float: right;
 }

在這里查看示例

Answer 5

我做了一個例子讓你了解元素的好一點。 與使用浮動，你可以“移動”（浮動）的元素，以一個特定的側面（左或右）。

這取決於你想要什么，你可以浮動的一切到左邊，這使得每一個元素“粘”到其它元件，只要寬度的不超過父元素寬度的元素。 否則會“下降”的元素，以適應寬度。 例如，這代碼，其中所述容器具有的600像素的寬度。 每一類“測試”具有250像素的寬度。 這將導致在2個元素彼此相鄰，但其他一個將屬於它。

<div class='container green'>
  <div class='test big blue'>a</div>
  <div class='test big red'>b</div>
  <div class='test big yellow'>c</div>
</div>

http://jsfiddle.net/qBR9M/4/

玩這個最好的辦法是給你的元素的背景色，所以你可以看到如何響應。