html - 使用 CSS 布局浮动和清除的页面元素

Question

我在页面布局方面遇到了这个问题，我一直在努力争取太久，无法继续理智地看待。整个页面布局是标准的两列：一个主列，右侧有一个窄列（带有float: right），页面的其余部分是主要区域。

现在，在主区域内，我有一段内容需要沿着主区域的右边缘浮动——这很好。但是，我需要在主要区域的浮动部分下方放置一些内容，而不是在右大列下方 - 我只是不知道该怎么做。

这是我正在尝试做的 jsfiddle：http: //jsfiddle.net/rx7Pd/

任何帮助是极大的赞赏。

Answer 1

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

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

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

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

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

Answer 2

你想要这样的东西吗？（在线演示）

主要内容的包装器和使用它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
}
…