嗯。我和这个一起度过了一段痛苦的时光!
事实上我根本做不到。
我正在寻找一个完整的页面宽度，两个 div 各占 50%，一个在左侧，一个在右侧。
在这两个 div 的顶部，我想要一系列 div，页面中间有一个 div (div5)。
中间 div 的任一侧我想要一个固定的 witdh div，它显示在页面每一侧的水平中心。所以 div3 是 div1 的中心，div7 是 div2 的中心。
然后在这些固定宽度的 div 之间，我想要两个流动的 div 来填充中间 div 和两侧固定宽度的 div 之间的空间。
一些 CSS 大神请把我从这场噩梦中解救出来! :D
无需IE6、7支持。 8 更好，但如果麻烦可以跳过。
谢谢!
最佳答案
终于... 使其从本地文件在 Firefox 21 上运行。出于某种原因，它在 Internet Explorer 8 中不起作用。好消息是不需要 jQuery。我发布了整个代码，以及下面 html 的布局:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {padding: 0px; margin: 0px; border: 0px;}
div {padding: 0px; margin: 0px; border: 0px;}
#div1 {background-color: #999; min-height: 350px; width: 50%; float: left;}
#div2 {background-color: #222; min-height: 350px; width: 50%; float: left;}
#div8 {position: absolute; top: 100px;}
#div3 {background-color: #333; min-height: 100px; width: 150px; float: left;}
#div4 {background-color: #444; min-height: 100px; min-width: 10px; float: left;}
#div5 {background-color: #555; min-height: 100px; width: 80px; float: left;}
#div6 {background-color: #666; min-height: 100px; min-width: 10px; float: left;}
#div7 {background-color: #777; min-height: 100px; width: 150px; float: left;}
</style>
<script type='text/javascript' language='javascript'>
function center()
{
var ww = window.innerWidth;
var div8w = document.getElementById('div8').offsetWidth;
var div3w = document.getElementById('div3').offsetWidth;
var div5w = document.getElementById('div5').offsetWidth;
var div7w = document.getElementById('div7').offsetWidth;
document.getElementById('div4').style.width = ((ww - div3w - div5w - div7w)/4)+"px";
document.getElementById('div6').style.width = ((ww - div3w - div5w - div7w)/4)+"px";
var div4w = document.getElementById('div4').offsetWidth;
var div6w = document.getElementById('div6').offsetWidth;
divLeft = ((ww - div3w - div5w - div7w - div4w - div6w)/2);
document.getElementById('div8').style.marginLeft = divLeft+'px';
setTimeout(center, 500);
}
function rS()
{
if ((document.readyState == 'interactive') || (document.readyState == 'complete'))
{
center();
}
setTimeout(rS, 100);
}
document.onload = rS();
</script>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div8">
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>
<div id="div6">div6</div>
<div id="div7">div7</div>
</div>
</body>
</html>
关于CSS - 固定宽度和居中定位 div 之间的流体 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17002093/