CSS阻止底部边框

Question

I have a div that I would like to have a bottom border.

This can be see at http://jsfiddle.net/R5YN2/

What causes the border to not be placed right at the bottom?

Answer 1

Your container element isn't accounting for the float ed elements and is basically collapsing.

Give it the property overflow: auto and it should work:

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

    overflow: auto;
}

Demo: http://jsfiddle.net/R5YN2/14/

---

Also, go easy on the class names. You can have selectors that target classes inside of elements:

#recurring-header-wrapper .label

Which matches only .label elements inside of the recurring-header-wrapper element. No need for huge class names.

Answer 2

If you float things you have to clear as well.

Read this: http://www.positioniseverything.net/easyclearing.html

This is what you're looking for. Add the class .clearfix to your wrapper-div (#recurring-header-wrapper).

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

Answer 3

It is displayed at the bottom (it ends there, the text is overflowing. Check that with overflow:hidden and most of the text disappear). Add a height to the div to make it the size you want.

Answer 4

Short answer: the float:left .

To correct that you can add overflow: auto to #recurring-header-wrapper

Answer 5

the floated divs inside cause this. you can clear them. http://jsfiddle.net/R5YN2/9/

Answer 6

Here's the quick fix. Basically when you float left the header groups get taken out of the flow unless you clear them with something (an empty div is fine)

<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

设置overflow: hidden在您的重复标头包装器上http://jsfiddle.net/R5YN2/16/