Question

我有一个设置，我有一个绝对div设置为左侧位置和右侧位置，以允许液体布局。这一切都运行良好，但后来我遇到一个问题，我有一个div下面的一些副本。问题是副本的div应该低于绝对定位的div。现在它出现在它上面，这是不正确的。

我经常看到这个问题是因为在将孩子设置为绝对之后折叠了父div，但为了解决这个问题，我使用clear all或overflow：隐藏在父级上，它会阻止崩溃发生。这一次它没有崩溃，但它显示我的底部div高于顶部div。

这是一个jsfiddle链接，可以显示我的代码。

Answer 1

我不确定你认为这会起作用的原因。你有容器footer。这包含两个子div - footerWrapper和footerTerms。

FooterWrapper绝对定位。所以它取决于所有其他元素的流程。 footerTerms是footerWrapper的兄弟，自然地从其父，页脚的左上角开始。

为什么footerWrapper在您希望它影响页面的内容流时绝对定位？使它相对或保持静态。

<div class="footer">
    <div class="footerWrapper"> 
    </div>
    <div class="footerTerms">
    </div>
</div>

Answer 2

我已经误解了你想要做什么，但是如果你想要一个液体布局，为什么不使用这样的东西：

CSS：

<style type="text/css">
    #footerWrapper {
        background: #ccc;
    }
    #footerWrapper .section {
        float: left;
        width: 33%;
    }
    .clear:after {
        content: " ";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }
    html[xmlns] .clear {
        display: block;
    }
    * html .clear {
        height: 1%;
    }
</style>

HTML：

<div id="footerWrapper">
    <div class="clear">
        <div class="section">
            Footer section 1<br />
            Footer section 1<br />
            Footer section 1
        </div>
        <div class="section">
            Footer section 2<br />
            Footer section 2<br />
            Footer section 2<br />
            Footer section 2
        </div>
        <div class="section">
            Footer section 3<br />
            Footer section 3<br />
            Footer section 3
        </div>
    </div>
    <div class="terms">
        Terms
    </div>
</div>

然后，如果你想将页脚挂钩到页面的右边，例如你可以编辑#footerWrapper CSS并给它一个宽度并浮动。

div高于绝对div和溢出

2 个答案: