Fatal编程技术网
  • html/
  • Html 浮动div中的内容会导致下面的div下降

Html 浮动div中的内容会导致下面的div下降

html css

Html 浮动div中的内容会导致下面的div下降,html,css,css-float,Html,Css,Css Float,我使用浮动div水平显示WordPress帖子。我已经让它工作得很好了，但是当div移动到新行时，如果每个浮动div中的段落文本太长，那么它下面的div就会下降。此外，每个浮动div都受其上方div长度的影响 我如何让它们自然流动，而不受上面高度的影响 以下是我对单个浮动div的HTML： <div class="entry_column> <div class="entry"> <h2>Entry title</h2>

我使用浮动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" />
我想尽一切办法进行清算，但如果我试图直接在浮动div上增加清算，我仍然无法让它停止下跌

希望这张图片能更好地解释这个问题。“More Music”框由于上方“Music Post Stand”div的长度而一直向下

所以你的问题的核心是“这只是去……测试柱”应该在最左边的“音乐柱支架”下面

尝试仅在一行entry\u列的末尾包含
，因此在屏幕截图中，您只能将其包含在“另一篇有趣的文章”和“这只是要……测试文章”之间


试验
参赛作品名称

条目摘录…如果此文本太长，它下面的div会向下压。
重复以使其变长：
条目摘录…如果此文本太长，它下面的div会向下压


参赛作品名称
条目摘录



参赛作品名称
新行条目

参赛作品名称
条目摘录
（…此时，您应该删除
并为行开头的条目列指定一个附加类，并使用CSS规则将该类指定为“clear:both；”属性。）

看起来有语法错误。您忘记关闭类属性：

如果您不能添加元素，您可以尝试使用CSS第3个子选择器说“每5个条目清除一列”。（对于第5行-条目宽度）




它可能不像您需要的那样对跨浏览器友好。
您在“更多音乐”部分应用了哪些样式？从图像上看，它似乎设置为清除浮动，这可能是导致问题的原因。你是否有一个链接到一个测试页面，显示发生了什么？更多的音乐使用与其他音乐相同的风格。它在同一个浮动的盒子里。不幸的是，我没有在线测试页面，因为我正在本地计算机上使用MAMP开发它。我会看看明天是否可以将其在线移动。是的，这是问题的核心，您的HTML示例运行良好。唯一的问题是，我不知道如何使用WordPress循环实现这一点……就像，如何在每行的开头动态添加
一样？我不熟悉WordPress。。。你能举一个“WordPress循环”的例子吗？我让它工作起来，花了一点时间摆弄PHP。非常感谢你的帮助，Richard。出现这个问题是因为我在每个元素的末尾添加了一个浮点，而浮点需要位于每行的末尾，就像在您的示例中一样。再次感谢你，如果你住在我附近，我会请你喝一杯

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

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

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



<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>



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