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
            |          |
            |__________|

我的假浮动状态：

 ______      __________
|      |    |          |
| 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

这是一个带有纯 CSS 解决方案的 jsFiddle：http: //jsfiddle.net/persianturtle/5fQFE/3/

您所要做的就是为包装器添加一个宽度并将其居中放置在页面上：

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

div1 和其他两个 div 之间的宽度由包装器的宽度控制。Div1 浮动到包装器的左侧。由于 div1 是浮动的，它不会影响 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;
} 

Answer 2

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

CSS

#wrapper {
    position: relative;
}

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