3 divs中間居中邊可在一個垂直居中的div中全部縮放

Question

我花了將近2天，卻不知道該怎么做。 這是一些代碼：

<div id='wrapper'>
  <div id='left'>
  </div
  <div id='middle'>
      <div id='centeredinmiddle'>
      </div>
  </div>
  <div id='right'>
  </div>
</div>

我需要的是：包裝垂直居中，左右可縮放，每個說20％的窗口寬度，中間靜態寬度：700px，居中居中-水平居中居中。

我不確定這是否可行，但我希望是。

Answer 1

http://jsfiddle.net/cJqAu/

更改浮動div的順序->

<div id='wrapper'>
  <div id='left'>
      foo bar
  </div>
    <div id='right'>
    bar foo
  </div>
  <div id='middle'>
     <div id='centeredinmiddle'>
        lorem ipsum dolor sit amet and so on...
     </div>
  </div>
</div>

並向左右div添加一些小的樣式規則：

#wrapper
{
  width: 70%;
  margin-left: 15%;
  /*this is not a beautiful and nice attempt, but it works*/
}
#left
{
  float: left;
  width: 10%;
}
#right
{
 float: right;
 width: 10%;
}
#centeredinmiddle
{
  /*no need for further style rules if you nicely adjust the others ;)*/
}

只需調整包裝紙的寬度即可