css - 用 Div 替换 HTML 表格元素？

Question

我有一个为所有站点网页一致生成的通用 header ，它使用 div 元素来包装包含一行和三个单元格的表格元素。

表格及其单元格用于保存三张图片，一张显示在页面的左上角，一张显示在页面的顶部中央，一张显示在页面的顶部-页面右侧。

目前的代码是这样的:

<div class="div_Header">
  <table class="table_Header">
    <tr>
      <td class="td_Left"><img src="./IMAGES/Logo_Left.png" alt="Left Logo" /></td>
      <td class="td_Center"><img src="./IMAGES/Center_Title.png" alt="Center Header" /></td>
      <td class="td_Right"><img src="./IMAGES/Logo_Right.png" alt="Right Logo" /></td>
    </tr>
  </table>
</div>

在上面，CSS 样式用于做一些事情，比如将左图对齐到最左边，将右图对齐到最右边，以及将中心图像对齐到页面的中心。

我的问题是:这是实现这一目标的最佳实践还是有更好的方法？而且，如果有更好的方法，代码会是什么样子？

Answer 1

通常使用包装器中的 3 个 float div 解决方案。

<div>
  <div id="d1">left</div>
  <div id="d2">right</div>
  <div id="d3">center</div>
</div>


#d1 {
  float: left;
  border: 1px solid red;
}


#d2 {
  float: right;
  border: 1px solid blue;
} 

#d3 {
  margin-left: 100px;
  margin-right: 100px;
  border: 1px solid green;
}

参见:http://jsbin.com/evagat/1/edit?html,css,output