Question

我在容器标签中放了两个div。容器只是简单地集中和修复内容。

我想在网站底部，home-segment和浏览器底部之间留出空间。但是出于某种原因，bottom-spacer浮动在home-segment之上。如何将其移至home-segment以下？

    <div class="container">

    // Content

    <div class="home-segment">
        <div class="col w33 col-first">
            <h2>A title</h2>
            <p>Lorem ipsum.</p>
        </div>
        <div class="col w33">
            <h2>Hey there.</h2>
        </div>
        <div class="col w33 col-last">
        </div>
    </div>

    <div class="bottom-spacer"></div>

</div>

CSS：

/* Home Page Columns */

.home-segment { width: 830px; float: left; }
.col-first { margin-left: 0 !important; }
.col.w33 { width: 220px; min-height: 200px; max-height: 200px; border: 1px solid #D9D4D4; background: #fff; margin-right: 15px; }
.col.w33 h2 { font-size: 18px; margin-bottom: 10px; }
.col-last { margin-right: 0 !important; }
.col { display: block; float: left; position: relative; overflow: hidden; padding: 10px; }

.bottom-spacer { padding-bottom: 25px; }

Answer 1

由于您没有清除浮动元素，它正转移到top

将clear: both;添加到.bottom-spacer

.bottom-spacer { clear: both;padding-bottom: 25px; background: #f00;}

Demo

有关行为的详细说明，您可以参考我的答案here和here

奇怪的标签定位

1 个答案: