带有CSS的行跨度

Question

我的网站布局使用这样的表格。

<table>
  <tr>
    <td align="left" valign="top" rowspan="2" style="padding-right:41px;">
    </td>
    <td align="left" valign="top" width="440px">
    </td>
  </tr>
  <tr>
    <td align="left" valign="top" width="440px">
    </td>
  </tr>
</table>

左侧的导航栏占据两行两列。

如何将其转换为 CSS？我如何处理行跨度？

我读到使用表格会减慢渲染页面的速度，因为浏览器必须先渲染所有列才能渲染表格。因此，如果一列包含 1000 个嵌套 div，则其他列必须等待渲染。这是真的吗？

Answer 1

我想你想要这样的东西：

CSS：

div#navBar {
    float: left;
    padding-right: 41px;
}
div.nonHeader {
    width: 440px;
}

HTML：

<div id="navBar"></div>
<div id="header" class="nonHeader"></div>
<div id="bodyText" class="nonHeader"></div>

这会强制导航栏位于标题和正文 div 的左侧，它们是固定宽度的。

我想知道您是否不希望 navBar div 是固定宽度的，而其他两个是灵活的。