居中的DIV（恰好为900像素），每边各有div（不透明），填充了页面的其余部分

Question

我有一个居中的DIV，该像素恰好（永远不会或多或少）900像素。 我希望它始终居中，并具有两个填充div来填充页面另一侧的其余部分...

给（使用z-index）下的内容加亮的字体效果...（这是使用填充divs ...以显示“ SPOTLIGHT”内容的每一侧还有其他内容，但不在“ 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中发生的事情来获得它，让它的子级脱离流程，并且位置绝对。

您将shadercenter放在中间，并在左侧将其钩住：50％，然后将其向左偏移，其负边缘向左偏移其一半大小。

对于周围环境，您可以使用约束功能来定义宽度。 对于左边的那个，您将其钩到左边的0 ：（因为它是左边的那个），然后将它的右边定义为将shadercenter钩住的位置...所以它将是右边的：50％。 然后，添加一个为shadercenter大小一半的边距右边，这样它将被限制为更小。 对正确的技术使用相同的“反向”技术

<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始终是固定宽度，始终居中，没有重叠