Question

我正在使用浮动的div水平显示WordPress帖子。我已经很好地工作了，但是当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的长度，“More Music”框会一直向下。

Answer 1

所以你的问题的核心是“这只是去......测试帖子”应该在“A音乐站”下面的最左边？

尝试包含＆lt; br class =“clearFloat”/＆gt;只有在一行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>

（...此时你应该删除＆lt; br /＆gt;并将那些位于行开头的entry_columns指定为另一个类，并使用CSS规则将该目标定位为'clear ：both;'property。）

Answer 2

看起来有语法错误。你忘了关闭class属性：

<div class="entry_column>

Answer 3

如果你不能添加元素，你可以尝试使用CSS 3 nth-child选择器说'清除每第5个entry_column。（对于5行宽的行）

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

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

它可能不像您需要的那样跨浏览器友好。

浮动div中的内容导致div下降

3 个答案: