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/

玩这个最好的办法是给你的元素的背景色，所以你可以看到如何响应。