左浮动附加div的响应布局 [英] 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和div3应居中，div1应为左侧浮动的额外div ）。

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

预期：

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

我的状态为false floating：

My status with false floating:

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

这里是我的问题： http://jsfiddle.net/5fQFE/2/
是否有任何CSS解决方案？

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

编辑：这应该可以多次：

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

推荐答案

这里是一个jsFiddle的CSS解决方案： a href =http://jsfiddle.net/persianturtle/5fQFE/3/ =nofollow> http://jsfiddle.net/persianturtle/5fQFE/3/

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

div1和其他两个div之间的宽度由包装器。 Div1浮动在包装器的左侧。由于div1是浮动的，它不影响div2和3的居中。如果你增加了布局的div的宽度，一定要增加包装器的宽度。

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.

更新：

由于您想要更多内容和侧边栏，请添加更多div， 。看看这个jsFiddle：

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

这篇关于左浮动附加div的响应布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！