Question

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

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

我也想使用div标签而不是表格布局。使用div标签给我以下优点（我被告知）：

可以在等待“正确”栏时呈现内容
在手机上，Div标签可以互相显示，而不是并排显示。

我的test / debug 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：错误

底部布局使用表：好

我的问题/问题

如何定位内容右侧的“右侧”栏，同时保持内容的动态宽度，而不是使用表格布局？

我真正想要的是右侧窗格显示在内容的右侧，但是当浏览器太小（＆lt; 20em）时，它可以显示在它下面。这是表格无法实现的，所以我更喜欢div解决方案。

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

修改

所有答案的答案，这真的有助于我前进。

我看到这里的“错误”。我已将正确的窗格放在内容窗格之后。如果我将右窗格放在内容窗格之前，它会正确呈现（在向内容添加边距权限之后）。

这对于html的流程来说有点不合逻辑。由于内容在右窗格中作为内容更重要，我希望在右窗格之前将其发送到客户端。

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
}

现在，主体的div（默认为100％的屏幕宽度）将是流畅的，右边的列将是固定的宽度。

Answer 2

添加一个清除：两者都在右栏。要管理在主要内容区域底部放置浮动的高度，请使用clearfix。另外，既然你希望右列浮动在左列下面，那么就不需要浮动左列了吗？

Answer 3

尝试以下CSS代码段：

display: table;

Answer 4

试试这段代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Пример</title>
    <style type="text/css">
      html,body{
        margin:0;
        padding:0;
      }

      #header{
        height:150px;
        min-width:600px;
        background:#FFEF97
        }

      #menu{
        width:250px;
        float:right;
        background:#FFC597
        }


      #info{
        min-width:350px;
        background: red;
        }

      #footer{
        height:20px;
        min-width:600px;
        background:#B9CC8A;
        clear:both
      }

      #body{
        width: expression(((document.documentElement.clientWidth
        || document.body.clientWidth) < 600)?
        "600px" : "100%")
        }
    </style>
    </head>
    <body>
    <div id="body">
    <div id="header">HEADER</div>
    <div id="menu">MENU (side bar)</div>
    <div id="info">INFO (central pane)</div>

    <div id="footer">FOOTER</div>
    </div>
    </body>
    </html>

Answer 5

尚未测试（但），但我认为我找到了问题的解决方案。

http://www.alistapart.com/articles/holygrail/

此解决方案允许混合固定和液体布局（我从询问此问题中学到的术语）。

使用Div标签重新设计表格（动态宽度）

我的问题/问题

修改

5 个答案: