0

我有一个如图所示的页面布局...... http://jsfiddle.net/k55DE/

我需要的是，无论屏幕有多宽，两个粉红色列的左边缘始终对齐。侧边栏容器总是 300px 宽，

谢谢你的帮助

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Example</title>
    </head>
    <body>

    <div id="toolbar">
        <div id="nav">NAVIGATION</div>
        <div id="search">SEARCH</div>
    </div>
    <div id="site">
        <div id="content">CONTENT</div>
        <div id="sidebar">SIDEBAR</div>
    </div>

    </body>
</html>​

-

#toolbar {
    margin-bottom:10px;
    overflow:auto;
}

#toolbar #nav,
#toolbar #search {
    float:left;
}

#toolbar #nav {
    background-color:#ddffdd;
    min-height:30px;
    text-align:right;
    width:66%;
}

#toolbar #search {
    background-color:#ffdddd;
    min-height:50px;
    width:34%;
}



#site {
    margin:0 auto;
    overflow:auto;
    width:800px;
}

#site #content,
#site #sidebar {
    float:left;
    min-height:300px;
}

#site #content {
    background-color:#ddffdd;
    text-align:right;
    width:70%;
}

#site #sidebar {
    background-color:#ffdddd;
    width:30%;
}
​
4

1 回答 1

0

解决此问题的最简单方法是确保绿色区域的右侧始终对齐。理论上，这可以通过使绿色区域始终保持相同大小来实现。不幸的是，这比其他情况要困难得多，因为上部绿色区域具有百分比宽度（66%），下部绿色区域具有明确宽度（800 像素的 70% 或 ~560 像素）。哦，较低的绿色区域居中。

因为下方的“内容”区域已经居中（margin-left 和 margin-right 是自动的），左边的边距将根据浏览器窗口的大小是一个固定的量。（大约（浏览器宽度 - 800）/2。）由于此值取决于渲染时浏览器的宽度，因此您无法在纯 CSS 中确定此数量，并且需要使用 JavaScript 来强制它们对齐。

Javascript 需要执行以下操作：

  1. 大约确定左边距的宽度（浏览器宽度 - 800px）/2。
  2. 设置上面绿色部分的宽度为边距宽度（按1计算）+800px。设置上部粉红色部分以水平填充其余部分。
  3. 为窗口调整大小操作添加一个侦听器，并在每次调整窗口大小时重复上面的 1 和 2。

如果底部没有居中，或者顶部也应用了相同的居中/尺寸，这一切都会简单得多。然后你就可以应用纯 CSS 解决方案了。

于 2012-07-02T14:53:22.463 回答