html - 居中 DIV(恰好 900 像素)，每一侧的 div(不透明)填充页面的其余部分

Question

我有一个居中的 DIV，正好(不多也少)900px。我希望它始终居中，并让两个填充 div 填充每一侧页面的其余部分...

给下面的内容(使用 z-index)一个突出显示的类型效果...(这是填充 div 的使用...以显示“SPOTLIGHT”内容的每一侧都有其他内容，但它不在下面“聚光灯”。

下面的代码不起作用...但它让您了解我正在尝试做什么

CSS:

/* DIV I WANT TO BE CENTERED, SURROUNDED BY 50% OPACITY DIVS FILLING REST OF PAGE */
.shadercentered {
width:950px;
margin-left:auto;
margin-right:auto;
position:relative;
background-color:green;
height:73px;
float:left;
top:-28px
}

/* DIVS THAT FILL THE REST OF THE PAGE ON EACH SIDE OF 900px CENTERED DIV */
.shaderblindsleft {
background-color:black;
opacity:0.5;
width:fill;;
height:73px;
float:left;
position:relative;
top:-28px;
}
.shaderblindsright {
background-color:black;
opacity:0.5;
width:fill;;
height:73px;
float:right;
position:relative;
top:-44px;
}

HTML:

<div class="shaderdiv">
    <div class="shaderblindsleft">&nbsp;</div>
    <div class="shadercenter">&nbsp;</div>
    <div class="shaderblindsleft">&nbsp;</div>
</div>

Answer 1

你可以通过控制 shaderdiv 中发生的事情来实现它，让它的 child 脱离流程，并使用绝对位置。

您将 shadercenter 放在中间，并将其钩在左侧:50%，然后将其向左偏移一半大小的负 margin-left。

对于周围环境，您可以使用约束功能来定义宽度。对于左侧，您将其 Hook 到 left:0(因为它是左侧的)，然后将其右侧定义为 Hook shadercenter 的位置……所以它应该是 right: 50%。然后，您添加一个大小为 shadercenter 一半的 margin-right，这样它就会被限制得更小。对正确的使用相同的技术“反转”

<div class="shaderdiv">
    <div class="shaderblinds left">&nbsp;</div>
    <div class="shadercenter">&nbsp;</div>
    <div class="shaderblinds right">&nbsp;</div>
</div>​

.shaderdiv
{
  position: relative;
  width: 90%;
  height: 73px;
  border: 1px solid yellow; /* debug stuff */
  box-sizing: border-box; /* debug stuff */
}

.shaderdiv > div { opacity:0.5 }

.shadercenter
{
  position: absolute;
  left: 50%;
  margin-left: -125px; /* minus half size of width */
  width:250px; /* fixed width */
  height:100%;
  background:green;
}

.shaderblinds
{
  position: absolute;
  height: 100%;
}

.left
{
  left: 0;
  right:50%;
  margin-right: 125px; /* half size of width */
  background:red;
}

.right
{
  right: 0;
  left: 50%;
  margin-left: 125px; /* half size of width */
  background:blue;   
}​

此处示例:http://jsfiddle.net/5kDjw/2/

你可以调整 shaderdiv 的大小，看看它是完全流动的，shadercenter 总是固定宽度，总是居中，没有重叠