2

私は正確に（多かれ少なかれ）900pxである中央のDIVを持っています。常に中央に配置し、2 つのフィラー 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 のサイズをいじって、それが完全に流動的であることを確認できます。

于 2012-11-26T02:01:09.640 に答える