CSS塊底部邊框

我有一個div，我想有一個底部邊框。CSS塊底部邊框

是什麼原因導致的邊界不被右下角放置待見？

2011-11-16 JonoB

您的容器元素沒有考慮到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

相匹配的recurring-header-wrapper元素內只有.label元素。不需要巨大的類名稱。

來源

2011-11-16 18:02:26 Blender

如果你漂浮的東西，你也必須清除。

閱讀本：http://www.positioniseverything.net/easyclearing.html

這是你在找什麼。將class .clearfix添加到您的wrapper-div（＃recurring-header-wrapper）。

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

來源

2011-11-16 18:00:43 Filip

都是這個：http： //jsfiddle.net/R5YN2/12/。注意'

'行，在HTML代碼上。 – Eray

雖然這解決了這個問題，但我個人認爲您應該清除而不必添加任何額外的標記。但這更多的是品味的問題。 – Filip

它是在底部顯示（這僅止於此，文本溢出，檢查與overflow:hidden和大多數文本消失）。爲div添加一個高度，使其成爲你想要的大小。

來源

2011-11-16 18:01:29 yoozer8

簡答：float:left。

要更正您可以添加內部原因這overflow: auto到#recurring-header-wrapper

來源

2011-11-16 18:01:54 samura

浮動的div。你可以清除它們。 http://jsfiddle.net/R5YN2/9/

來源

2011-11-16 18:02:08

這是快速修復。基本上當你漂浮離開組被取出流動的，除非你的東西清除它們的頭（一個空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>

來源

2011-11-16 18:02:47

設置overflow: hidden在您的週期性頭包裝http://jsfiddle.net/R5YN2/16/

來源

2011-11-16 18:03:06 stephenmurdoch

CSS塊底部邊框

回答

相關問題