Question

如果不使用表格，我如何在同一行中对齐两个元素（左边一个，右边另一个）？

Answer 1

使用float：right;和float：left;

Answer 2

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 3

如果你想要它们在同一行，你可以使用INLINE或INLINE-BLOCK。

＆＃13;

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

＆＃13;

SADD feature1 ABC

＆＃13;

Answer 4

试试这个：

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

和css：

.align-left{
   float: left;
 }

.align-right{
   float: right;
 }

参见示例here

Answer 5

我已经为你做了一个例子来更好地理解元素。使用浮动可以将元素“移动”（浮动）到特定的一侧（左侧或右侧）。

根据您的需要，您可以将所有内容浮动到左侧，这样只要元素的宽度不超过父元素宽度，每个元素都会“粘贴”到另一个元素。否则它们将“落在”元素下面以适应宽度。例如，此容器的宽度为600px的代码。每个类'test'的宽度为250px。这将导致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/

玩这个的最好方法是给你的元素一个背景颜色，这样你就可以看到响应的方式。

HTML，在同一行的两边对齐两个元素

5 个答案: