响应式布局与浮动额外的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; 
}