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的宽度，请务必增加包装器的宽度。

更新：

由于您需要更多内容和侧边栏，请添加更多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;
}

具有左浮动附加div的响应式布局

2 个答案: