0

我的 CSS 布局的一部分设置 div 相对于宽度的高度，以便所有屏幕尺寸的纵横比都相同。这样，我从不专门将 div 的高度设置为 px 值 - 高度只是宽度的纵横比。如果您以前没有遇到过这种技术，这里有一个很好的解释。

到我的具体问题...

考虑到这一点，我创建了以下简单的 div，它的宽度是高度的两倍：（要查看它的实际效果，请参阅此小提琴）

<html>
    <head>
       <style type="text/css">
.container
{
    position:relative;
    width:50%;/*half the width of the whole page*/
    margin:auto;/*center the whole thing*/
}
.relative_container
{
    background-color:blue;
    position:absolute;
    width:100%;
    top:0;
    left:0;
}
.set_height
{
    width:100%;
    height:100%;
    margin-top:50%;/*aspect ratio 2:1*/
}
       </style>
    </head>
    <body>
        <div class='container'>
            <div class='relative_container'>
                <div class='set_height'></div>
            </div>
        </div>
    </body>
</html>

到目前为止一切都很好。但是我想在第一个下添加另一个相同的 div。正如您在这个小提琴中看到的那样，我无法让它们以任何方式显示，而不是彼此叠加。毫无疑问，答案在于清除 div ，如此处所示，但我无法弄清楚。

4

2 回答 2

2

你的relative_container类是绝对定位的，所以它将两个 div 放置在 top:0, left:0 处，宽度和高度相同（所以它们彼此重叠）。这对你正在做的事情没有意义。

如果您将定位更改为相对，并添加float: left到您的奇怪名称relative_container，您将获得所需的行为，因为它们将“浮动”到其父 div 中最左边的可能位置。

此外，您的“清晰” div 没有做任何事情。clear 属性告诉其他 div 不要浮动到给定 div 的右侧/左侧。如果你的 div 的宽度是 100%（即它填满了父级），那么无论如何都不能漂浮在它旁边。

示例 1：http: //jsfiddle.net/NKRPe/13/

编辑： 第二个示例在不使用虚拟 div 的情况下完成了相同的任务。请注意，可以使用padding-top或padding-bottom。

于 2013-02-03T10:27:34.217 回答
1

添加到 .container ：

padding:25% 0 0;
于 2013-02-03T10:31:40.843 回答