響應式佈局與浮動額外的div

Question

我有以下簡單的標記來構建一個負責任的佈局：

<div class="wrapper"> 
    <div class="div1"></div> 
    <div class="div2"></div> 
    <div class="div3"></div> 
</div> 

DIV2和DIV3應居中和DIV1應該是一個懸空的額外的div（對於個人資料或東西）。

預期：

 ______ __________ 
    |  ||   | 
    | div1 || div2 | 
    |______||   | 
      |__________| 
      |   | 
centered-> | div3 | <-centered 
      |   | 
      |__________| 

我與假漂浮狀態：

______  __________ 
|  | |   | 
| div1 | | div2 | 
|______| |   | 
      |__________| 
      |   | 
centered-> | div3 | <-centered 
      |   | 
      |__________| 

這裏是我的問題：http://jsfiddle.net/5fQFE/2/ 有任何CSS的唯一的解決辦法？

編輯：這應該是可能多次：

 ______ __________ 
    |  ||   | 
    | div1 || div2 | 
    |______||   | 
      |__________| 
      |   | 
      | div3 | 
      |   | 
    ______ |__________| 
    |  ||   | 
    | div4 || div5 | 
    |______||   | 
      |__________| 
      |   | 
      | div6 | 
      |   | 
      |__________| 

，但有以下簡單的標記：

<div class="wrapper"> 
    <div class="div1">more markup here!?</div> 
    <div class="div2"></div> 
    <div class="div3"></div> 
    <div class="div4">more markup here!?</div> 
    <div class="div5"></div> 
    <div class="div6"></div> 
</div> 

Answer 1

這裏是一個的jsfiddle使用CSS唯一的解決辦法：http://jsfiddle.net/persianturtle/5fQFE/3/

所有你需要做的就是寬度增加了包裝和居中在頁面上：

.wrapper { 
    padding: 20px; 
    width:550px; 
    margin:0 auto; 
} 

DIV1之間的寬度而另外兩個div由包裝紙的寬度控制。 Div1浮動在包裝的左側。由於div1是浮動的，因此不會影響div2和3的居中。如果增加布局div的寬度，請務必增加包裝的寬度。

UPDATE：

既然你想了解更多的內容和工具條，添加更多div但給他們相同的類。看看這個的jsfiddle：

http://jsfiddle.net/persianturtle/5fQFE/6/

.div1, .div4 { 
    background: #ddd; 
    float: left; 
    width: 100px; 
} 

.div2, .div5 { 
    background: #ccc; 
} 

.div3, .div6 { 
    background: #bbb; 
} 

Answer 2

的jsfiddle：http://jsfiddle.net/5fQFE/4/

CSS

#wrapper { 
    position: relative; 
} 

#div1 { 
    position: absolute; 
    top: 0; 
    left: -210px; 
    width: 200px; 
}