Question

我正在开发一个ASP.NET站点。布局非常基础。母版页有一个标题，在横幅下方有一个水平菜单，占据整个宽度。左侧是导航窗格，宽150像素，带有图片和一些外部链接。宽度的其余部分是ContentPlaceholder。在它下面是页脚。

在默认页面中，母版页的内容有几个div。一个用于“新闻”，一个用于“常见问题解答”，一个用于“截止日期”，另一个用于“每日图表”。每个都是450像素宽，我用适当的“浮动：左;”设置它们。并且“浮动：正确;”因此，内容的左侧“列”是新闻，然后是其下的常见问题解答，右栏是截止日期和图表。如果用户将浏览器缩小得太多，截止日期和图表将被推送到新闻和常见问题解答中。

现在我被指示改变行为。现在，如果用户缩小浏览器，截止日期和图表应该“保持原状”并保持为第二列，用户必须使用水平滚动条才能正确查看它们。

我认为使用“min-width：950px;”在整体内容div上会这样做，但内容div上的“float：right”最终会在我缩小浏览器时推送导航窗格下的整个内容部分，当我进一步缩小它时，截止日期和图表div仍然是受到新闻和常见问题解答的推动。

我知道我错过了一些简单的东西 - 比如“无论如何都要保持正确”的财产 - 以及锚点或其他东西。谷歌搜索示例并没有多大帮助，因为我认为我没有把正确的词语用于搜索。

提前感谢任何建议。

Answer 1

听起来很神奇，到目前为止最简单的方法是抛弃div并使用表格结构。

下面是一个完整的例子。只需将其保存为html文件并在浏览器中预览即可。顺便说一下，您可以使用不同的文档类型来查看它们如何影响输出。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
<style>
.box { width:250px;float:left;border: solid 1px green;}
.outer{width:600px;}
</style>    
</head>

<body>
<div class="outer">
<div class="box" style="height: 200px">Hello World!</div>
<div class="box" style="height: 300px">Hello World!</div>
<div class="box" style="height: 100px">Hello World! asd asdfasfd asdjasd hyasydufuasydf auysdfaysdfuaysdfu yasdufy ausdyf aiusdyf aiusydfuasdfasdf asf</div>
<div class="box" style="height: 50px">Hello World!</div>
</div>
</html>

Answer 2

除非我误解，否则无论浏览器的高度/宽度如何，您都希望页面保持不变。如果是这种情况，您可以简单地使用绝对位置并在css中设置绝对顶部和左侧像素设置。所以你的新闻css就像是

position: absolute;
top: 0px;
left: 0px;
...

然后你的截止日期将是：

position: absolute;
top: 0px;
left: 450px;
...

等等。您可能必须根据您的标题使用亲戚作为位置或设置一个顶部偏移量，并根据您的链接div（您已经说过150）确定左侧偏移量，但如果您希望页面保持不变，那么这是您最好的选择。如果您对此有任何疑问，请与我们联系。

Answer 3

这适用于我，在FF3和IE6中。

    <html>
    <head>
        <title></title>
    <style>
    .content_section{width:450px;border: solid 1px green;}
    .nav{width:150px; border: solid 1px yellow; float: left;}
    .content_container{width: 950px; border: solid 1px blue; float: left;}

    </style>    
    </head>

    <body>
    <div style="width: 1104px;">
        <div class="nav">
                Navigation here<br />Navigation here<br />Navigation here<br />Navigation here<br />Navigation here<br />Navigation here<br />Navigation here<br />Navigation here<br />
        </div>
        <div class="content_container">
            <div style="float: left;">
                <div id="news" class="content_section">news<br />news<br />news<br />news<br />news<br />news<br />news<br />news<br /></div><br />
                <div id="faq" class="content_section">faq<br />faq<br />faq<br />faq<br />faq<br />faq<br />faq<br />faq<br />faq<br /></div>
            </div>
            <div style="float: right;">
                <div id="deadlines" class="content_section">deadlines<br /></div><br />
                <div id="chart" class="content_section">chart<br />chart<br />chart<br />chart<br />chart<br />chart<br />chart<br />chart<br />chart<br /></div>
            </div>
        </div>
    </div>
    </html>

Answer 4

当你厌倦了自己管理这个时，你应该看看一个不错的CSS网格系统。

以下是两个：

这些系统让你做的事情变得微不足道。

Answer 5

最简单的答案是将所有内容都包装在容器中，并为容器提供一个宽度，使其不会缩小。实施例

<div id="container">
  <div id="header"></div>
  <div id="nav"></div>
  <div id="leftContent"></div>
  <div id="rightContent"></div>
  <div id="footer"></div>
</div>

这允许左右内容完全是任何高度。

如何在一个保留2列的ContentPlaceholder中安排2列div？

5 个答案: