WordPress博客上的简单浮动问题

发布于 2024-08-27 15:01:35 字数 438 浏览 6 评论 0原文

我正在完全修改一个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; }

关于如何使页面在这里正确流动的任何想法吗？

原文

I am modifying a wordpress theme completely, and have run into one very simple problem. Please look at my page here: wordpress blog When you scroll down, you can see the one blank area under the first post. For some reason, that block isn't floating left. Each post has the following css that fits in a 645px container:

.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; }

Any idea on how to make the page flow correctly here?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ま昔日黯然 2024-09-03 15:01:35

crimson_penguin 是正确的。这是因为柱子的高度不同。每两列你不想做一次清除。这里最简单的事情是查看循环的索引，并在每 2 次之后回显一个clearfix。您可以使用模数来执行此操作，和/或将类应用于 1、3、5 等处的类。 .. 到 clear:left。

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

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

基本上，您向其传递三个参数（第二个和第三个是可选的），其中第一个是 $count 或要查看的对象（例如for 循环）和 $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，就可以了！

crimson_penguin is correct. It's because the columns are different heights. Every 2 columns you wan't to do a clear. The easiest thing to do here would look at the index of the loop and echo a clearfix after every 2. You can do this with modulo, and/or apply a class to the ones at 1, 3, 5, etc... to clear:left.

Here is a PHP function of mine that I use to clear.

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

Basically, you pass it three arguments (the second and third are optional) where the first is the $count, or the object to look at (for example $i in a for loop) and $odd / $even are strings to be used when an odd or even item in the loop is encountered.

Here it is in action:

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

I'm doing the cycle on the $key which in this case happens to be 0, 1,... n. The result is the following:

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

Simply apply some clear:left to the odd ones, and you'll be all set!

回复收藏 0 原文