Question

好。我和这个人度过了一段艰难的时光！

事实上，我根本无法做到这一点。

我正在寻找一个完整的页面宽度，两个div占用50％，一个在左侧，一个在右侧。

在这两个div的顶部，我想要一系列div，页面中间有一个div（div5）。

在中间div的任何一侧，我想要一个固定的witdh div，显示在页面每一侧的horitzonal中心。所以div3是div1的中心，div7是div2的中心。

然后在那些固定宽度div之间我想要两个流体div来填充中间div和两侧固定宽度div之间的空间。

一些CSS上帝请救我脱离这场噩梦！：d

不需要IE6,7支持。 8首选，但如果麻烦则可以跳过。

谢谢！

enter image description here

Answer 1

终于...... 让它从本地文件开始在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

1 个答案: