浮动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下降

回答

相关问题