Question

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

Answer 1

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

由于较低的“内容”区域已居中（边距左侧和边距右侧为自动），因此左侧边距将根据浏览器窗口的大小固定。（大约（浏览器宽度 - 800）/ 2。）由于此值取决于渲染时浏览器的宽度，因此您无法在纯CSS中确定此数量，并且需要使用JavaScript来强制这些数量排成一行。

Javascript需要执行以下操作：

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

如果底部没有居中或者顶部也应用了相同的定心/尺寸，这将更加简单。然后你就可以应用纯CSS解决方案了。

排列两组列

1 个答案: