css - 具有左浮动附加 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
            |          |
            |__________|

我的假 float 状态:

 ______      __________
|      |    |          |
| 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 之间的宽度由 wrapper 的宽度控制。 Div1 float 到包装器的左侧。由于 div1 是 float 的，它不会影响 div 2 和 3 的居中。如果您为布局增加了 div 的宽度，请确保也增加 wrapper 的宽度。

更新:

因为你想要更多的内容和侧边栏，添加更多的 div，但是给它们相同的类。看看这个 jsFiddle:

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

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

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

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