HTML左对齐和右对齐元素

一些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;
}

像这样:

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 特定于每个内容的内容(有利于 semantic CSS而不是结构的命名方法)。