html - 排列两组色谱柱

我的页面布局如下所示...
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%;
}

最佳答案

解决此问题的最简单方法是确保绿色区域的右侧始终对齐。理论上，这可以通过使绿色区域始终保持相同大小来实现。不幸的是，这比原本要困难得多，因为上部绿色区域具有百分比宽度（66％），下部绿色区域具有显式宽度（800px或〜560px的70％）。哦，下面的绿色区域居中。

因为较低的“内容”区域已居中（左边缘和右边缘是自动的），所以基于浏览器窗口的大小，左边的边缘将是固定的数量。（大约（浏览器宽度-800）/ 2。）由于此值取决于呈现时浏览器的宽度，因此您无法在纯CSS中确定此数量，因此需要使用JavaScript来强制将它们对齐。

Javascript需要执行以下操作：

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

如果底部未居中或顶部也应用了相同的居中/调整大小，这将更加简单。然后，您将能够应用纯CSS解决方案。

关于html - 排列两组色谱柱，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11291862/