Question

我正在完全修改wordpress主题，并遇到了一个非常简单的问题。请在此处查看我的页面：wordpress blog当您向下滚动时，您可以看到第一篇文章下面的一个空白区域。出于某种原因，该块不会向左浮动。每个帖子都有以下适合645px容器的css：

.home-post-wrap { width: 285px; margin:0; float: left; background-color: #FFF;  padding: 15px; overflow: hidden; border-bottom:1px dotted #C5C5C5; border-right:1px dotted #C5C5C5; }

有关如何在此处正确显示页面流的任何想法吗？

Answer 1

它向左浮动，问题是第一个块比第二个块高，使它伸出下面，所以第三个块仍然和前两个块在同一个“线”上，就像你想的那样如果第一个街区高出两倍，那就预料到了。

你可能想要的是一个＆lt; div style =“clear：left;”＆gt;＆lt; / div＆gt;每两个块之间......但在WordPress中可能很难做到。另一个可能的解决方案是它们的最小高度，但这不会很好（并且在IE6中不起作用）。

Answer 2

crimson_penguin是对的。这是因为列的高度不同。每两列你都不清楚。这里最简单的方法是查看循环的索引并在每2个循环后回显一个clearfix。您可以使用modulo执行此操作，和/或将类应用于1, 3, 5, etc...到clear:left的类

这是我用来清除的PHP函数。

<?php
    public static function cycle($count, $odd = 'odd', $even = 'even') {
        return ($count % 2) ? $even : $odd;
    }
?>

基本上，你传递三个参数（第二个和第三个是可选的），其中第一个是$count，或者是要查看的对象（例如$i中的for loop）和$odd / $even是遇到循环中奇数或偶数项时要使用的字符串。

这是在行动：

    <?php foreach ($products as $key => $product): ?>
        <li class="<?= Template::cycle($key) ?>">
            <img src="<?= $product->get_photo('small') ?>" />
            <div class="productMeta">
                <h3><a href="<?= $product->get_absolute_url() ?>"><?= $product->get_full_name() ?></a></h3>
                <p><?= $product->get_description() ?></p>
            </div>
        </li>
    <?php endforeach; ?>

我在$key上进行循环，在这种情况下恰好是0, 1,... n。结果如下：

<li class="odd"> 
    <img src="http://arbesko.dev/wp-content/themes/arbesko/img/products/small/465.jpg" />
    ...
</li> 

<li class="even"> 
    <img src="http://arbesko.dev/wp-content/themes/arbesko/img/products/small/935.jpg" /> 
    ...
</li> 

<li class="odd"> 
    <img src="http://arbesko.dev/wp-content/themes/arbesko/img/products/small/350.jpg" />
    ...
</li>

只需将一些clear:left应用于奇数的那些，你就会完全被设定！

wordpress博客上的简单浮动问题

2 个答案: