Question

在我网站的this page上，div以奇怪的方式浮动。原始主题（http://demo.fabthemes.com/revera/portfolio/）以正确的方式显示它们。我检查了代码+ css但似乎无法找到问题。

这里出了什么问题？

Answer 1

只需设置 min-height ：

article.post, article.page, section.error-404 {
  margin-bottom: 40px;
  min-height: 240px;
}

Answer 2

你的标签延伸到两行的事实使它不愉快。

考虑将h3设为固定高度，或在每四个项目后添加clear:both;元素。

Answer 3

高度并不总是一样的。这样做：

article.post, article.page, section.error-404 {

margin-bottom：40px;

最小高度：300px; ＆LT; ----

}

Answer 4

由于某些标题分为两行，因此块的高度不同。您可以设置此css以强制它们保持在一行：

.portbox h3 {
    height: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

您还可以设置h3的固定高度，该高度可容纳2行（或您可能拥有的最大行数）。

Answer 5

你需要在div.row中每4列嵌套

  <div class="row">
    <article class="col-sm-3 col-6 portbox post">... </article>
    <article class="col-sm-3 col-6 portbox post">... </article>
    <article class="col-sm-3 col-6 portbox post">... </article>
    <article class="col-sm-3 col-6 portbox post">... </article>
</div> 
  <div class="row">
    <article class="col-sm-3 col-6 portbox post">... </article>
    <article class="col-sm-3 col-6 portbox post">... </article>
    <article class="col-sm-3 col-6 portbox post">... </article>
    <article class="col-sm-3 col-6 portbox post">... </article>
</div>

为什么div会像这样漂浮？

5 个答案: