2

我有一个居中的 DIV，它正好（从不多或少）900 像素。我希望它始终居中，并让两个填充 div 填充每一侧页面的其余部分......

为（使用z-index）下的内容提供突出显示的类型效果...（即使用填充div ...显示“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>
4

1 回答 1

1

你可以通过控制shaderdiv中发生的事情来获得它，让它的孩子脱离流程，绝对位置。

你把shadercenter放在中间，把它钩在左边：50%，然后用一个负边距向左偏移它的一半大小。

对于周围，您使用约束的功能来定义宽度。对于左边的，你把它钩到left：0（因为它是左边），然后你定义它的右边是shadercenter被钩住的地方......所以它是正确的：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 始终是固定宽度，始终居中，没有重叠

于 2012-11-26T02:01:09.640 回答