html - 不同div的水平对齐

Question

这不是问题，而是解决方案，但也许你们中有人可以解释为什么会这样。我使用 div(带有 white-space=nowrap 的行包装器和带有 display=inline-block 的单元格)构建了一个表。标题行和表格的其余部分位于两个具有不同 ID 的不同容器 div 中。

代码如下:

<div id="main_container">
  <div id="header_wrapper">
    <div id="header_row">
      <div class="column_cell1">...</div> 
      <div class="column_cell2">...</div>
      ...other cells...
    </div>
  </div> --closed the header container
  <div id="table_content_wrapper">
    <div id="table_row">
      <div class="column_cell1">...</div> 
      <div class="column_cell2">...</div>
      ...other cells identical classes as the header...
    </div>
     ...several other table rows...
  </div> --closed the table container
</div> --closed the main container

CSS 看起来像:

#header_wrapper {
position:absolute;
top:100px;
height:100px;
width:100%;
}

#table_content_wrapper {
position:absolute;
top:200px;
bottom:0;
width:100%;
}

#header_row {
height:100%;
white-space:nowrap;
}

#column_row {
height:100px;
white-space:nowrap;
}

.column_cellN (all equal) {
height:100%;
width:10%;
display:inline-block;
white-space:normal;
}

无论我做什么，标题单元格和表格行单元格都没有对齐。使它们看起来相同的唯一方法(经过大量尝试)是将相同的 div ID 分配给标题行包装器和表格行包装器。

最奇怪的是，chrome 中的开发人员工具报告标题和表格中的各个单元格具有相同的像素宽度，但实际上它们在浏览器中的呈现方式不同。在 IE 中也有相同的行为。

有人知道为什么会这样吗？

Answer 1

对我有用。

http://jsfiddle.net/UMf3k/2/

更正您的 css:#header_wrapper {position:relative;}