Question

我有一个通用标头，它始终为所有网站网页生成，并使用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浮动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

Answer 2

为所有display:inline-block

设置div's

div {
  display: inline-block;
  width: 100%;
  text-align: center;
}
div > div {
  width: auto;
}
div > div:first-child {
  float: left
}
div > div:last-child {
  float: right
}

<div>
  <div id="d1">content 1</div>
  <div id="d2">content 2</div>
  <div id="d3">content 3</div>
</div>

Answer 3

我相信你想要的是有一张带有bg的表格，遗憾的是这不是开箱即用的，而是你可以做几件事

不要使用html表标签，因为它们不是很好，并且浏览器对它们的处理方式不同（特别是FF），所以改为使用css声明。
使用background-image: url('')及其属性来更好地控制图像的外观（特别是如果你使用响应式布局），如果你不想给出一个类每个单元格你可以使用:nth-child(1,2,3,etc..)如果你将坚持使用html标签或:nth-of-type(1,2,3,etc..)如果你将使用3个div的类。

作为第二个选项你可以使用@briansol浮动技巧但是浮动不再适用于网络。

用Divs替换HTML表格元素？

3 个答案: