CSS - 固定宽度和居中定位的 div 之间的流体 div答案

【问题标题】：CSS - fluid divs in between fixed width & centered positioned divsCSS - 固定宽度和居中定位的 div 之间的流体 div
【发布时间】：2013-06-04 19:44:42
【问题描述】：

嗯。我和这个玩得很开心！

事实上我根本做不到。

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

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

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

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

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

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

谢谢！

【问题讨论】：

是从页面顶部定义的 div 3-7 的垂直距离还是百分比？

标签： css html fluid-layout fixed-width

【解决方案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>

【讨论】：

谢谢。这是所需的外观，但不是所需的操作。您将 div 4 和 6 作为固定百分比。 div 3、5 和 7 需要固定宽度 (px)，div 4 和 6 流动并填充固定宽度 div 之间的空间。