我的页面布局如下所示... http://jsfiddle.net/k55DE/
我需要的是无论屏幕有多宽，两个粉红色列的左边缘始终对齐。边栏容器始终为 300 像素宽，
感谢您的帮助
<!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%)，而下部绿色区域具有明确的宽度(800 像素的 70% 或 ~560 像素)。哦，下面的绿色区域居中。
因为下方的“内容”区域已经居中(margin-left 和 margin-right 是自动的)，左边的边距将根据浏览器窗口的大小固定一些。 (大约(浏览器宽度 - 800)/2。)由于此值取决于呈现时浏览器的宽度，因此您无法在纯 CSS 中确定此数量，需要使用 JavaScript 强制这些排列。
Javascript 需要执行以下操作:
- 确定左边距的宽度(浏览器宽度 - 800px)/2，大约。
- 将上部绿色部分的宽度设置为边距宽度(如1中计算的)+ 800px。设置上部粉红色部分以水平填充其余部分。
- 将监听器添加到窗口调整大小操作，并在每次调整窗口大小时重复上面的 1 和 2。
如果底部没有居中或者顶部也应用了相同的居中/大小调整，这一切都会简单得多。然后您就可以应用纯 CSS 解决方案。
关于html - 排列两组列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11291862/