4

我今天在 jQuery 中玩幻灯片。当我注意到奇怪的事情时，我设法创建了它。放置幻灯片的 div#feature似乎以某种方式粘在其父元素#content上。当我添加margin: 10px auto到#featurediv 时，#contentdiv 也相对于其父元素降低了 10px。

谁能告诉我我在这里做错了什么？

为您提供整个代码会造成混乱，但这里有一个链接：

https://dharman.eu/sites/daftpunk/

用于#feature：

#feature {
    width:940px;
    margin: 10px auto;
    position: relative;
    height:500px;
    overflow: hidden;
    clear: both;
    box-shadow: 0px 0px 5px 2px #000;
}

和CSS #content：

#content{
    min-height:800px;
    background-color: #fff;
}

我的朋友注意到一件有趣的事情。如果你在内容中添加margin-bottom: 30px到#menu空白的 10px 空间，虽然边距问题仍然没有解决，但它会被正确填充。

4

2 回答 2

3

position: relative只是这样做...使任何适用于它的元素的位置变得与其父容器“相对”。

#feature是 的子级#content，因此#feature的位置相对于 的位置#content。当您将 10 像素的边距添加到 #feature 时，它​​会从#content.

于 2012-11-30T14:16:54.180 回答
0

尝试添加overflow:auto;到#content. 它可能会有所帮助。

添加溢出可防止边距折叠

在 CSS 中，两个或多个框（可能是或不是兄弟）的相邻边距可以组合形成一个边距。

来自https://www.w3.org/TR/CSS2/box.html#collapsing-margins

于 2012-11-30T14:16:28.383 回答