Responsive Layout with left floating additional div

问题

I have to build a responsive layout with the following simple markup:

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

div2 and div3 should be centered and div1 should be a left floating additional div (for biographical data or something).

The expected:

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

My status with false floating:

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

Here is my problem: http://jsfiddle.net/5fQFE/2/ Is there any CSS only solution?

EDIT: this should be possible multiple times:

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

but with the following simple markup:

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

回答1:

Here is a jsFiddle with a CSS only solution: http://jsfiddle.net/persianturtle/5fQFE/3/

All you had to do was add a width to the wrapper and center it on the page:

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

The width between div1 and the other two divs is controlled by the width of the wrapper. Div1 is floated to the left of the wrapper. Since div1 is floated, it does not affect the centering of the divs 2 and 3. If you increase the width of the divs for your layout, be sure to increase the width of the wrapper as well.

UPDATE:

Since you want more content and sidebars, add more divs, but give them the same classes. Look at this jsFiddle:

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

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

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

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

回答2:

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

CSS

#wrapper {
    position: relative;
}

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

来源：https://stackoverflow.com/questions/14857226/responsive-layout-with-left-floating-additional-div

标签

css

css-float

responsive-design

centering