具有响应式设计的Div结构

Question

我试图在响应式设计中以不同的顺序浮动3个div。在移动版本是相关的（div 1，div 2，div 3），但在桌面版本中，我想将div 3放在div 1附近并将div 2放在它们的底部。我正在使用浮球进行测试，清除等，但我不知道如何修复它。我分享一个模型。可以帮助我吗？由于

mockup http://s2.subirimagenes.com/imagen/previo/thump_8425505positiondiv.png

这是HTML结构：

<div id="fondo-web"> 

<div id="main"> 

    <section id="main-container" name="div1"> 
     Random Image 
    </section> 

    <section id="cadiz-a-caballo" name="div2"> 
     Copy Text   
    </section> 

    <section id="frm-container" name="div3"> 
     Contact Form 
    </section> 


</div> 

</div> 

在示例中，这是一个尝试：

#main-container{ 
    width:33%; 
    background-color:#856; 
    float:left; 
} 

#cadiz-a-caballo{ 
    width:33%; 
    background-color:#376; 
} 

#frm-container{ 
    width:30%; 
    background-color:#856; 
    float: right; 
} 

与其他尝试用绝对定位和下边距为父亲容器：

#main-container{ 
    width:62%; 
    background-color:#856; 
    float:left; 
} 

#cadiz-a-caballo{ 
    width:70%; 
    position: absolute; 
    background-color:#376; 
    top:600px; 
} 

#frm-container{ 
    width:35%; 
    background-color:#856; 
    float: right; 

} 
#main{ 
    width:75%; 
    margin:auto; 
    margin-bottom: 150px; 
    overflow: hidden; 
    background-color: #343; 
} 

Answer 1

这或多或少是你想要什么：http://jsfiddle.net/uyQzQ/1/

，首先要进行的第一个div其父的一定百分比：

#main-container{ 
    width:65%; 
} 

这将留出空间供第三DIV以后再落入。

然后你想要第二个div是母公司的全宽：

#cadiz-a-caballo{ 
    width: 100%; 
} 

最后要位置留给第一个div右侧的空间第三格。要做到这一点，你需要定位父所以第三格的绝对定位将是相对父，而不是文档：

#main{ 
    position: relative; 
} 

现在，你只需要到3 div的宽度尺寸设定为剩下的空间，然后将其放在父级的右上角。

#frm-container{ 
    width:35%; 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

我没有在每个元素之间加入任何边距。您可以调整宽度以考虑这一点以添加这些边距。

这种方法的主要问题是第三个div需要与div 1相同或者比div 1短，否则因为div 3不在文档流中，它也会显示在div2之上（以及任何下面的内容，如果足够长的话）。