2

我想显示一个具有经典设计的 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>

这段代码的输出在这里：

div 与表格
（来源：vantslot.be）

（文字无所谓，只有布局，所以我把它缩小了一点）。

顶部布局使用 div：错误

底部布局使用表格：好

我的问题/问题

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

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

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

编辑

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

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

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

4

5 回答 5

2

这将允许您的右侧固定宽度列适合您另一列的边距，因此位于同一行：

#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% 屏幕宽度）将是流动的，而您的右列将是固定宽度。

于 2009-05-05T14:25:14.693 回答
1

在右栏中添加 clear:both。要管理在主要内容区域底部浮动的高度，请使用clearfix。另外，既然您希望右列浮动在左列下方，那么没有必要浮动左列？

于 2009-05-05T14:09:17.930 回答
0

试试这个代码：

<!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>
于 2009-05-05T14:37:10.657 回答
0

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

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

该解决方案允许混合固定布局和流动布局（我从提出这个问题中学到的术语）。

于 2009-05-15T12:55:30.430 回答
0

试试下面的 CSS 片段：

display: table;
于 2009-05-05T14:21:49.447 回答