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

使用float：right;和float：left;

Answer 3

試試這個：

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

和CSS：

.align-left{ 
    float: left; 
} 

.align-right{ 
    float: right; 
} 

見例如here

Answer 4

。我有一個例子讓你瞭解元素的好一點。通過使用浮動元素，您可以將元素「移動」（浮動）到特定的一側（左側或右側）。

根據您的需要，您可以將所有內容浮動到左側，只要元素的寬度不超過父元素寬度，每個元素都會「粘」到另一個元素。否則，它們將在元素下面「下降」以適合寬度。例如這個代碼容器的寬度爲600px。每個「測試」類的寬度爲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/

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

Answer 5

如果你希望他們在同一行，你可以使用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>