浮動div中的內容導致div下降

我使用浮動div來水平顯示WordPress帖子。我的工作正常，但是當div移動到新行時，如果每個浮動div內的段落文本太長，它下面的div就會下降。此外，每個浮動div都受到它上面div的長度的影響。浮動div中的內容導致div下降

我該如何讓它們自然流動而不受上述高度的影響？

這裏是我的一個浮動的div HTML：

<div class="entry_column> 
    <div class="entry"> 
     <h2>Entry title</h2> 
     <p>Entry excerpt...if this text gets too long, the div immediately 
below it gets pushed WAY down</p> 
     </div> 
    </div> 
    <br class="clearFloat" />

這裏是相關CSS類：

.entry_column { 
     float: left; width: 50%; 
    } 

     .entry_column .entry { 
      margin-right: 25px; 
    } 

.clearFloat { 
    clear: both; 
    height:0; 
    font-size: 1px; 
    line-height: 0px; 
}

我什麼都試過了我能爲結算想到的，但如果我嘗試直接在浮動div上添加清除，我仍然無法讓它停止下降。

希望圖像能更好地解釋這個問題。由於其上方的「Music Post Stand」div的長度，「更多音樂」盒子一路下降。

來源

2010-01-10 orbit82

你有什麼樣式適用於更多音樂部分？從圖像看來，它設置爲清除浮動，這可能是導致問題的原因。你有鏈接到測試頁面，顯示發生了什麼？ – NerdStarGamer 2010-01-10 05:53:02

更多的音樂使用與其他人相同的風格。它在同一個浮動框中。不幸的是，我沒有在線測試頁面，因爲我正在使用MAMP在本地計算機上開發它。我會看看我明天是否可以將它移到網上。 – orbit82 2010-01-10 06:53:36

所以你的問題的心臟是，「這只是要...測試郵報」應該是對抗最左邊，在「阿樂後架」？

嘗試包括< BR類=「clearFloat」只在entry_columns一行的末尾/ >，所以在截圖你包括它只有在「另一個有趣的崗位」和「這是剛準備之間...測試郵報」

<html> 
<head> 
<title>Test</title> 
<style type="text/css"> 
<!-- 
.entry_column { 
    float: left; width: 100px; 
} 

    .entry_column .entry { 
     margin-right: 25px; 
} 

.clearFloat { 
    clear: both; 
    height:0; 
    font-size: 1px; 
    line-height: 0px; 
} 
--> 
</style> 
</head> 
<body> 
    <div class="entry_column"> 
    <div class="entry"> 
     <h2>Entry title</h2> 
     <p> 
      Entry excerpt...if this text gets too long, the div immediately below it gets pushed WAY down. 
      Repeated to make it long: 
      Entry excerpt...if this text gets too long, the div immediately below it gets pushed WAY down 
     </p> 
     </div> 
    </div> 
    <div class="entry_column"> 
    <div class="entry"> 
     <h2>Entry title</h2> 
     <p>Entry excerpt...</p> 
     </div> 
    </div> 
    <br class="clearFloat" /> 
    <div class="entry_column"> 
    <div class="entry"> 
     <h2>Entry title</h2> 
     <p>New row of Entries</p> 
     </div> 
    </div> 
    <div class="entry_column"> 
    <div class="entry"> 
     <h2>Entry title</h2> 
     <p>Entry excerpt...</p> 
     </div> 
    </div> 
    <br class="clearFloat" /> 
</body> 
</html>

（......此時，你應該改爲刪除< BR/>和分配那些在行的開頭附加類entry_columns和目標與該類一個CSS規則給它'明確：兩個'屬性。）

來源

2010-01-10 06:18:54 Richard

是的，這是問題的核心，並且您的HTML示例運行良好。唯一的問題是，我不知道如何通過WordPress循環來實現這一點......如何在每行的開始處動態添加
？ – orbit82 2010-01-10 06:50:54

我對WordPress不熟悉......你能否加入一個「WordPress循環」的例子？ – Richard 2010-01-10 14:55:59

我得到它的工作，花了一點時間擺弄PHP。理查德，謝謝你的幫助。發生這個問題是因爲我在每個元素的末尾添加了一個浮點數，當浮點數需要位於每行的末尾時，就像在你的例子中一樣。再次感謝，如果你住在我附近，我會給你買一杯飲料！ :-) – orbit82 2010-01-11 21:49:04

它看起來像那裏是一個語法錯誤。你忘了關類屬性：

<div class="entry_column>

來源

2010-01-10 08:27:39 ambiguousmouse

-1

如果無法添加元素，你可以嘗試使用CSS 3第n個孩子選擇說「明確每5 entry_column。（對於行5項寬）

.entry_column:nth-child(5n+0)

http://www.w3.org/TR/2009/PR-css3-selectors-20091215/#nth-child-pseudo

它只是可能沒有跨瀏覽器友好的，因爲你需要。

來源

2010-01-11 14:53:53

浮動div中的內容導致div下降

回答

相關問題