Question

我有一个div，我希望有一个底边。

查看

是什么原因导致边框不能放在底部？

Answer 1

您的容器元素不考虑float ed元素，基本上是折叠。

给它属性overflow: auto，它应该有效：

#recurring-header-wrapper {
    display: block;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;

    overflow: auto;
}

演示：http://jsfiddle.net/R5YN2/14/

另外，轻松上课。您可以使用选择器来定位元素内的类：

#recurring-header-wrapper .label

哪个匹配.label元素中仅 {/ em> recurring-header-wrapper个元素。不需要庞大的班级名称。

Answer 2

如果你漂浮的东西，你也必须清除。

阅读本文：http://www.positioniseverything.net/easyclearing.html

这就是你要找的东西。将类.clearfix添加到wrapper-div（#recring-header-wrapper）。

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

Answer 3

它显示在底部（它在那里结束，文本溢出。用overflow:hidden检查，大部分文本消失）。在div上添加一个高度，使其达到你想要的大小。

Answer 4

简答：float:left。

要更正您可以将overflow: auto添加到#recurring-header-wrapper

Answer 5

内部浮动的div导致了这一点。你可以清除它们。 http://jsfiddle.net/R5YN2/9/

Answer 6

这是快速解决方案。基本上当你向左浮动时，标题组被取出流，除非你用某些东西清除它们（空div很好）

<div id="recurring-header-wrapper">
    <div class="recurring-header-group">
        <div class="recurring-header-label">Label</div>
        <div class="recurring-header-item">Item</div>
    </div>
    <div class="recurring-header-group">
        <div class="recurring-header-label">Label</div>
        <div class="recurring-header-item">Item</div>
    </div>
    <div style="clear:both"></div>
</div>

Answer 7

在定期页眉包装http://jsfiddle.net/R5YN2/16/

上设置overflow: hidden

CSS阻止底部边框

7 个答案: