如何使用clear for float？

我試圖使用一個佈局，其中每個條目將包含左側的投票和右側的內容。所以我使用float:left進行投票，其內容爲.left和float:right，內容爲.right。但它不起作用。如何使用clear for float？

我認爲它是一個明確的修復問題。在這種情況下，我嘗試使用clear:both作爲.right，但無法完成。因爲每個主要條目的保底底部沒有正確安裝。

我認爲這是由於不清晰的修復代碼。

任何人都可以給出一種替代方案來做出同樣的佈局或我在這裏做什麼錯。

.entry { 
    width:80%; 
    border-bottom:2px solid black; 
    margin-bottom:10px; 

} 
.left{ 
    float:left; 
    background-color:blue; 
    width:10%; 
    clear:left; 
} 
.right{ 
    float:right; 
    width:90%; 

}

這裏是JSfiddle

來源

2013-12-15 rram

我都會浮動元素後包含這些浮動元素的div結束前添加一個div的風格clear:both;。你的情況是這樣的：

<div class="entry"> 
    <div class="left">vote</div> 
    <div class="right">Contetnts</div> 

    <div style="clear:both;"></div> 

</div>

來源

2013-12-15 16:50:33

感謝+1。如何只有一個明確：這兩項工作？你能解釋一下嗎？@Daniel Lisik – rram

代碼'clear：both'就像是一個通用的解決方案。這就像一個div的「反浮動」風格，使得該元素旁邊沒有任何其他浮動元素，也沒有左側或右側。因此，在浮動元素之後，將該樣式添加到div使得div具有「clear：both」，就像保持浮動元素位置的固體框一樣。希望有所幫助！ –

謝謝。我有一個疑問，'clear：left'表示它將刪除左側的額外空間，'clear：right'表示它將刪除右側的額外空間，'clear：both'將清除雙方的額外空間。我清楚了嗎？ @Daniel Lisik – rram

.entry { 
    overflow: auto; 
    width:80%; 
    border-bottom:2px solid black; 
    margin-bottom:10px; 
}

http://jsfiddle.net/bFXpq/3/

來源

2013-12-15 16:50:51 Adrift

它看起來沒有說得很對，誠實。 –

謝謝+1。這裏有什麼溢出。 @Adrift – rram

如何使用clear for float？

回答

相關問題