1

出色地。我和这个玩得很开心！

事实上我根本搞不定。

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

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

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

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

一些 CSS 上帝请把我从这个噩梦中拯救出来！:D

无需IE6、7支持。最好8，但如果麻烦可以跳过。

谢谢！

在此处输入图像描述

4

1 回答 1

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>
于 2013-06-08T19:04:37.080 回答