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

其他尝试使用父容器的绝对定位和margin-bottom：

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

这将为第3个div留下空间。

然后你希望第二个div成为父级的全宽：

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

最后，您要将第3个div放在第一个div左侧的空白处。为此，您需要定位父级，以便第3个div的绝对定位将相对于父级而不是文档：

#main{
   position: relative;
}

现在，您只需要将第3个div的宽度设置为剩余空间的大小，然后将其放置在父级的右上角。

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

我没有在每个元素之间包含任何余量。您可以调整宽度以将此值考虑在内以添加这些边距。

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

Div结构，响应式设计

1 个答案: