Question

首先，我确实阅读了THIS问题，该问题引导我THIS提问。这些问题的总体答案是将overflow: auto;添加到父级，但实际上在Firefox中创建了一个小滚动条。

我的问题是我的内容中有一个元素，我需要浮动，但我也有一个浮动的侧边栏。因此，当我在内容中的元素上使用clear: both;时，它会创建一个到边栏末尾的间隙。我会发布我的代码，虽然它非常简单：

<div class="post-recipe">

<div class="post-recipe-1"><strong>Time:</strong> <?php the_field('prep_time'); ?></div>

<div class="post-recipe-2"><strong>Servings:</strong> <?php the_field('makes'); ?></div>

<div class="post-recipe-3"><?php the_field('ingredients'); ?></div>

<div class="post-recipe-4"><?php the_field('directions'); ?></div>

</div>

我的CSS，再次，非常基本

.post-recipe { 
position: relative;
width: 100%;
height: auto;
}

.post-recipe-1 {
float: left;
}

.post-recipe-2 {
float: right;
}

.post-recipe-3 {
clear: both;
}

我已经构建了设计，它在我决定回溯并添加这个位之前正常运行。我实际上正在考虑使用表来格式化这一位，但在我这样做之前，我认为我＆＃39 ;在这里问我的问题。我再次在父级中尝试overflow: auto;，但它创建了一个滚动条。添加该DID可以消除差距，但我无法使用该滚动条。我也尝试将height: 0;添加到我的clearfix中，但它什么也没做。有没有其他方法可以浮动前两个元素，清除浮动而不会产生间隙？

HERE是相关网页的链接，如果您查看“准备时间和服务”部分下方，您会看到差距。

Answer 1

看看这是否摆脱了差距

overflow: hidden;

如果没有滚动条，应该会给你相同的效果。

使用clear：两者都在项目下创建了一个空隙

1 个答案: