Question

要做到这一点，我已经这样做了：

<table style="width:100%;">
 <tr>
    <td style="width:50%;text-align: left;">left</td>
    <td style="width:50%;text-align: right;">right</td>
  </tr>
</table>

如何在不使用表格的情况下以最简单的方式（最少标记）完成此操作？我只想将2个元素对齐到最左边和右边。

那里有数百个2列布局，但它们更符合页面布局，看起来有点过分。

Answer 1

一些html：

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

一些CSS：

.left, .right {
  width: 50%; /* Floated elements technically need a width specified. */
}

.left {
  float: left;
}

.right {
  float: right;
}

Answer 2

这样的事情：

<强> CSS

<style type="text/css">
#primary {
   width: 100%;
}

.secondary {
   width: 50%;
}

.leftcolumn {
   float: left;
   text-align: left;
} 

.rightcolumn {
   float: right;
   text-align: right;
}
</style>

<强> HTML

<div id="primary">
   <div class="secondary leftcolumn">
      <p>This will be on the left</p>
   </div>
   <div class="secondary rightcolumn">
      <p>This will be on the right</p>
   </div>
</div>

虽然我会将leftcolumn和rightcolumn更改为特定于每个内容的内容（支持CSS的semantic命名方法而非结构化。）

HTML左右对齐元素

2 个答案: