1

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

小样
（来源：subirimagenes.com）

这是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;
}
4

1 回答 1

3

这或多或少是您想要的：http: //jsfiddle.net/uyQzQ/1/

首先，您要将第一个 div 设为其父级的一定百分比：

#main-container{
    width:65%;   
}

这将为第 3 个 div 留出空间，以便稍后进入。

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

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

最后，您要将第三个 div 放置在第一个 div 右侧的左侧空间中。为此，您需要定位父级，因此第三个 div 的绝对定位将相对于父级，而不是文档：

#main{
   position: relative;
}

现在，您只需将第 3 个 div 的宽度设置为左侧空间的大小，然后将其定位在父级的右上角。

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

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

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

于 2013-05-08T19:54:09.007 回答