如何显示在数组中的布局使用的项目不同数量（PHP） [英] How do Display A Layout With a Variable Number of Items in an Array (PHP)

问题描述

如果我给你一个阵列的对象，让我们假设有物体的x个你会怎么做以下使用网格系统（引导，基础...无所谓）：

If I give you an array of objects, lets assume there are x number of objects how would you do the following using a grid system (bootstrap, foundation ... doesn't matter):

遍历数组和创造的东西，复制：

Loop Over the array and create something that replicates:

没有我已经能够做创造这样的：

No I have been able to create this by doing:

echo "<div class='row'>";
    for($i = 0; $i < count($options['fields']); $i++) {

        // Increate the value of I and convert it from 1 to one.
        $numberToWord = new FreyaTheme\NumberToWord\Conversion();
        $wordRepersentation = $numberToWord->convert($i + 1);

        if (isset($options['fields']['logo_image_' . $wordRepersentation])) {
            if ($i <= 2) {
                echo '<div class="medium-4 columns r3x1">';
                    echo '<img src="'.$options['fields']['logo_image_' . $wordRepersentation].'" />';
                echo '</div>';
            } else if ($i <= 6) {
                echo '<div class="medium-3 columns r4x1">';
                    echo '<img src="'.$options['fields']['logo_image_' . $wordRepersentation].'" />';
                echo '</div>';
            } else if ($i <= 9) {
                echo '<div class="medium-4 columns r3x1">';
                    echo '<img src="'.$options['fields']['logo_image_' . $wordRepersentation].'" />';
                echo '</div>';
            }
        }
    }
echo "</div>";

现在这样，虽然有点乱这里的逻辑 - 适用于10个项目。现在想象一下，我给你800或8或2或1或...你的想法。不管我有多少项目给你，这种模式下，此框布局需要重复。如果你给我6个或6000的对象我不在乎。

Now this, while a bit messy with the logic here - works for 10 items. Now imagine I give you 800. or 8 or 2 or 1 or ... you get the idea. Regardless of how many items I give you, this pattern, this box layout needs to repeat. I don't care if you give me 6 or 6000 objects.

我可以用10做到这一点，但我不知道如何缩放。想法？

推荐答案

嗯，这是一个解决方案。 OFC你必须使它响应自己和使用CSS类，而不是联CSS：

Well this is one solution. Ofc you have to make it responsive yourself and use css classes instead of inline css:

<div style="padding: 5px; text-align:center;">
    <?php
    for($i = 0; $i < 5; ++$i)
    {
    ?>
    <div>
    <?php
        //output 3
        if ($i%2 == 0)
        {
            for($cell=0;$cell<3;++$cell)
            {
            ?>
            <div style="display:inline-block; border:1px solid #000; width: 200px; margin-bottom: 10px;">
                <span style="padding: 40px; display:inline-block; text-align:center;">350*150</span>
            </div>
            <?php
            }
        }
        //output 4
        else
        {
            for($cell=0;$cell<4;++$cell)
            {
            ?>
            <div style="padding: 5px; display:inline-block; border:1px solid red; width: 138px; margin-bottom: 10px;">
                <span style="padding: 30px; display:inline-block; text-align:center;">350*150</span>
            </div>
            <?php
            }
        }
    ?>
    </div>
    <?php
    }
    ?>
</div>

这篇关于如何显示在数组中的布局使用的项目不同数量（PHP）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！