Question

我的作品中有一个新的网站供我的制作公司使用，现在它很挑剔。

我有一个包含视频和侧边栏div的主体元素。这些设置为向左和向右浮动，它们连同标题div都包含在页面中心的一个大“框架”div中。大纲如下：

<frame>
    <header>
    </header>
    <main>
        <video>
            <vidframe> <- This is for keeping the iframe's aspect ratio (read it in some online tutorial)
                <iframe>
                </iframe>
            </vidframe>
        </video>
        <sidebar>
        </sidebar>
    </main>
</frame>

现在，帧div具有白色背景，这将内容与我的背景图像分开。然而，问题是主div，并且通过扩展帧div不向下延伸超过标题以包含视频和侧边栏div。您可以查看问题here on my website。

我假设它与浮动属性或位置属性有关，但我无法弄清楚出了什么问题。这是我的CSS的样子：

div.frame {
    width:70%;
    height:auto;
    background-color:#FFF;
    margin-left:auto;
    margin-right:auto;
    padding:0;
    box-shadow:0 0 20px 0 #000;
}
div.main {
}
div.video {
    margin-left:3.57%;
    margin-top:3.57%;
    width:57.14%;
    float:left;
}
div.vidframe {
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
}
div.vidframe iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
div.sidebar {
    margin-right:3.57%;
    margin-top:3.57%;
    width:32.14%;
    float:right;
}

同样，这都是现场at my website.

感谢您的帮助！

Answer 1

你需要清除浮子。使用类main在div的结束标记之前添加<div style="clear:both"></div>。在你的html第34行之后

Div不扩展元素

1 个答案: