Question

我遇到了一个令我困惑的问题。

我有一个容器，我想将背景应用到浏览器屏幕右上角的位置。里面的div有一个4em的上边距，这是推动容器div。

CSS：

#container {
background: transparent url("../images/house-bg.png") top right no-repeat scroll;
}

#wrapper {
    background: #FFF;
    width: 960px;
    height: 600px;
    margin: 4em auto 0;
    border: 10px solid #C3CF21;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow: 0 0 25px #444;
    -webkit-box-shadow: 0 0 25px #444;
    box-shadow: 0 0 25px #444;
}

HTML：

<div id="container">
        <div id="wrapper">
            <div id="header">

            </div>
            <div id="main">

            </div>
        </div>
        <div id="footer">
            &copy; Copyright <?php echo date("Y");?> Company, Inc.
        </div>
    </div>

我希望包装器的边距位于容器div内而不是外部。

我尝试过多个显示属性和位置属性无济于事。修复它的唯一方法是在#wrapper开始之前插入一个“ ”，但必须有一个CSS修复。

Answer 1

您可以添加overflow:hidden以“关闭”#container div中的上下文。

在这里，http://jsfiddle.net/kQsPR/尝试删除overflow:hidden，它会按照您的描述行事。

此行为在此处指定： http://www.w3.org/TR/CSS2/visuren.html#block-formatting

在块格式化上下文中，每个盒子的左外边缘接触左边包含块的边缘（用于从右到左格式化，右边缘触摸）。即使在这个问题上也是如此浮子的存在（虽然是一个盒子线盒可能因此而缩小浮动），除非盒子建立了新块格式化上下文（其中盒子本身可能会变成由于浮子而变窄了。

这正是“隐藏”以外的“溢出”能够（建立新的格式化上下文），例如，你也可以通过在#container元素中添加border-top来做到这一点。

div内容保证金推进容器

1 个答案: