html - 使用 Div 标签重新设计表格(动态宽度)

Question

我想显示一个具有经典设计的 html 页面。页眉、页脚、内容和右侧栏。

出于某种原因，我不喜欢内容的固定宽度。在宽屏幕上，您应该能够调整页面大小，使其充满屏幕，或者使其非常小以并排显示两个页面。

我还想使用 div 标签而不是表格布局。使用 div 标签给我以下优势(有人告诉我):

• 可以在等待“右”栏时呈现内容
• 在手机上，Div 标签可以显示在彼此下方，而不是并排显示。

我的测试/调试 html 如下所示:

<!-- Create content with DIV tags -->
<div id="head" style="background-color:aqua">This is the header</div>
<div id="body" style="float:left;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales sagittis sem, at bibendum nunc aliquet non. Maecenas condimentum, libero pharetra suscipit sodales, dui diam laoreet velit, at lacinia nisl erat sed turpis. Quisque lobortis consequat elementum. Suspendisse non interdum est. In velit felis, rhoncus tincidunt tincidunt sit amet, laoreet eu ligula. Nulla facilisi. Sed ornare facilisis pulvinar. Integer viverra arcu eu turpis dictum vitae tincidunt magna scelerisque. Nunc laoreet pulvinar odio, quis rutrum libero consectetur non. Donec molestie, felis volutpat condimentum iaculis, orci arcu feugiat sapien, accumsan scelerisque sapien orci sed urna. Curabitur et turpis sit amet diam vulputate egestas. </p>
</div>
<div id="right" style="background-color:orange; float:right; width:10em;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="tail" style="background-color:lime;clear:both;">This is the Footer</div>

<p>&nbsp;</p>

<!-- Create content with TABLE tag -->
<div id="t-head" style="background-color:aqua">This is the header</div>
<table cellpadding="0" cellspacing="0">
    <tr><td>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales sagittis sem, at bibendum nunc aliquet non. Maecenas condimentum, libero pharetra suscipit sodales, dui diam laoreet velit, at lacinia nisl erat sed turpis. Quisque lobortis consequat elementum. Suspendisse non interdum est. In velit felis, rhoncus tincidunt tincidunt sit amet, laoreet eu ligula. Nulla facilisi. Sed ornare facilisis pulvinar. Integer viverra arcu eu turpis dictum vitae tincidunt magna scelerisque. Nunc laoreet pulvinar odio, quis rutrum libero consectetur non. Donec molestie, felis volutpat condimentum iaculis, orci arcu feugiat sapien, accumsan scelerisque sapien orci sed urna. Curabitur et turpis sit amet diam vulputate egestas. </p>
    </td><td valign="top" style="background-color:orange; width:10em;">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </td></tr>
</table>
<div id="t-tail" style="background-color:lime;clear:both;">This is the Footer</div>

这段代码的输出在这里:

_{(来源:vantslot.be)}

(文本无关紧要，重要的是布局，所以我缩小了一点)。

顶部布局使用了 div:错误

底部布局使用表格:好

我的问题/问题

如何在不使用表格布局的情况下将“右”栏放置在内容的右侧，同时保持内容的动态宽度？

我真正想要的是右 Pane 出现在内容的右侧，但是当浏览器太小(< 20em)时，它可以显示在它下面。这对于表格是不可能的，所以我更喜欢 div 解决方案。

在最终网站中，页眉/页脚/内容和右侧的内容将动态生成，因此我无法对高度进行硬编码。

编辑

感谢所有的回答，这真的帮助我前进。

我明白这里的“错误”是什么。我已将右 Pane 放在内容 Pane 之后。如果我将右 Pane 放在内容 Pane 之前，它会正确呈现(在向内容添加 margin-right 之后)。

这对于 html 的流程来说有点不合逻辑。由于内容比右 Pane 中的内容更重要，我希望它在右 Pane 之前发送给客户端。

Answer 1

这将使您右侧的固定宽度列适合您其他列的边距，因此位于同一行:

#right
{
    float:right; 
    width:18em;
}

#body
{
    margin-right: 20em; //IE calculates padding into the width, so you need a buffer unless you set body's padding to 0
}

现在 body 的 div(默认为 100% 屏幕宽度)将是流动的，而您的右侧列将是固定宽度。