使用CSS布置浮动和清除的页面元素

Question

我遇到了页面布局的这个问题，我一直在争取持续太长时间才能继续保持清醒。整个页面布局是一个标准的两列：一个主列，右边有一个窄列（float: right），页面的其余部分是主要区域。

现在，在主要区域内，我有一段内容需要沿主区域的右边缘浮动 - 这很好。然而，我需要在主要区域的浮动部分下方放置一些内容，但不要在右侧列的下方 - 我只是无法弄清楚如何操作。

以下是我试图做的事情：http://jsfiddle.net/rx7Pd/

非常感谢任何帮助。

Answer 1

将overflow: auto或overflow: hidden添加到主容器中。

  

更新了示例：http://jsfiddle.net/TT8QF/

这是与清除浮动div相关的常见修复。您可以找到一些信息here和here。

如果你也在父元素上使用此修复，你可以摆脱HTML代码底部的丑陋清除div。只看：

  

更新了示例：http://jsfiddle.net/bNS98/

Answer 2

你想要这样的东西吗？ (online demo)

主要内容的包装器和使用它display: table-cell是这个技巧的主要思想：

<强> HTML

    /* full html markup is on my demo */
    …
    <div class="right-main">
            right-floating part of main area.
    </div>
    <div id="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget risus libero. Nunc ornare pretium quam, a blandit magna suscipit viverra. Sed eu metus ut justo viverra tempus id in magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean vitae eros nec mauris vestibulum dictum.
    </div>
    <div id="rest">
        I want this to be below the main
        right column but not below the
        overall right column
    </div>
    …

<强> CSS

/* full css code is on my demo */
…
#content {
    display: table-cell
}
…