css - 使用 CSS 的 Div 布局问题

Question

我试图在我的页面上并排布置两个 Html 表格。当我点击左侧的投资组合 ID 时，我的交易贡献记录会显示在右侧。

我使用单独的 div，它允许我创建一个标题表来锁定列标题，并在它下面创建另一个包含数据的可滚动表。

请参阅示例:http://jsfiddle.net/robertmazzo/6zWdP/1/

详细信息:

页面的一个主要 div -页面内的四个 div:

1)两个向左浮动的div
1a) 第一个 div 是一个带有 <caption> 的表格和 <thead>和 <th>仅 header
2a) 第二个 div 是可滚动的并且包含完整的表格单元格内容，没有标题

2)两个向右浮动的div
1a)同上
2a)同上

如您所见，我的投资组合定义 div 和左侧的表格看起来漂亮整洁。

但是，右侧的 Trade Contrib div 和表格略有倾斜。

仅供引用 - 如果没有这种为表列标题使用单独的 div 的技术，我的两个表并排看起来很棒。然而，它们没有锁定标题列的外观。例如/http://jsfiddle.net/robertmazzo/bsApv/3/

我会继续试验，但我将不胜感激一些指导和建议。

Answer 1

将您的 div 组合包装在包装 div 中并 float 它们。

<div id=left>
    <div id=leftheaders />
    <div id=leftbody />
</div>