Question

我正在尝试在我的网站上使用PHP进行一些随机化（颜色和内容）。

我正在尝试创建一个网格，其中一半div被自动生成，中间有一个不同的div，但是PHP自动在自动之前和之后插入换行符生成的内容。

正如你所看到的，更大的标题框被推到它自己的行而不是被其他框包裹，以便在中间创建一个带有更大框的网格形状（这就是为什么我不能使用浮动，因为它只有左或右的选项。）。

我该如何解决这个问题？

我的PHP / HTML：

<div id="main">

    <h1 class="visuallyhidden">Home – Peter Ambos</h1>
    <?php

        $colors = array("#000", "#D8D8D8", "#909090");
        $content = array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z");

        function create_icons($number, $colors, $content)
        {
            $created = "";

            for ($i = 1; $i <= $number; $i++) {
                shuffle($content);
                $selected = array_pop($content);
                $created = $created . '<div class="icon_wrapper">
                    <div class="icon l' . $i . '" style="background-color: ' . $colors[array_rand($colors)] . '" >
                        '. $selected . '
                    </div>
                </div>';
            }

            return $created;

        }

        echo create_icons(13, $colors, $content) . '<div class="title"></div>' . create_icons(13, $colors, $content);
    ?>

</div>

我的CSS：

#main {
    display: inline-block;
    margin: 5em 0 3em 0;
    width: 46.6em;
    height: 35.2em;
    text-align: left;
    overflow: hidden;
}

.icon {
    height: 5em;
    width: 5em;
    margin: 0 0.2em 0.2em 0;
    display: inline-block;
    background: #000;
}

.icon_wrapper {
    margin: 0 0.2em 0.2em 0;
    display: inline-block;
    height: 5em;
    width: 5em;
}

.title {
    height: 5em;
    width: 21.4em;
    margin: 0 0.2em 0.2em 0;
    display: inline-block;
    text-align: center;
    background-image: url("/src/img/title.png");
    background-size: cover;
}

生成的HTML：

<div id="main">


    <div class="icon_wrapper">
                <div style="background-color: #909090" class="icon l1">

                    G

                </div>
            </div><div class="icon_wrapper">
                <div style="background-color: #D8D8D8" class="icon l2">

                    Z

                </div>
            </div><div class="icon_wrapper">
                <div style="background-color: #909090" class="icon l3">

                    J

                </div>
            </div><div class="icon_wrapper">
                <div style="background-color: #909090" class="icon l4">

                    R

                </div>
            </div><div class="icon_wrapper">
                <div style="background-color: #909090" class="icon l5">

                    A

                </div>
            </div><div class="icon_wrapper">
                <div style="background-color: #D8D8D8" class="icon l6">

                    H

                </div>
            </div><div class="icon_wrapper">
                <div style="background-color: #000" class="icon l7">

                    C

                </div>
            </div><div class="icon_wrapper">
                <div style="background-color: #D8D8D8" class="icon l8">

                    I

                </div>
            </div><div class="icon_wrapper">
                <div style="background-color: #000" class="icon l9">

                    K

                </div>
            </div><div class="icon_wrapper">
                <div style="background-color: #909090" class="icon l10">

                    X

                </div>
            </div><div class="icon_wrapper">
                <div style="background-color: #D8D8D8" class="icon l11">

                    Q

                </div>
            </div><div class="icon_wrapper">
                <div style="background-color: #909090" class="icon l12">

                    E

                </div>
            </div><div class="icon_wrapper">
                <div style="background-color: #000" class="icon l13">

                    N

                </div>
            </div><div class="title"></div><div class="icon_wrapper">
                <div style="background-color: #000" class="icon l1">

                    U

                </div>
            </div><div class="icon_wrapper">
                <div style="background-color: #D8D8D8" class="icon l2">

                    L

                </div>
            </div><div class="icon_wrapper">
                <div style="background-color: #000" class="icon l3">

                    Q

                </div>
            </div><div class="icon_wrapper">
                <div style="background-color: #D8D8D8" class="icon l4">

                    S

                </div>
            </div><div class="icon_wrapper">
                <div style="background-color: #000" class="icon l5">

                    V

                </div>
            </div><div class="icon_wrapper">
                <div style="background-color: #000" class="icon l6">

                    E

                </div>
            </div><div class="icon_wrapper">
                <div style="background-color: #909090" class="icon l7">

                    X

                </div>
            </div><div class="icon_wrapper">
                <div style="background-color: #D8D8D8" class="icon l8">

                    W

                </div>
            </div><div class="icon_wrapper">
                <div style="background-color: #909090" class="icon l9">

                    Y

                </div>
            </div><div class="icon_wrapper">
                <div style="background-color: #D8D8D8" class="icon l10">

                    Z

                </div>
            </div><div class="icon_wrapper">
                <div style="background-color: #D8D8D8" class="icon l11">

                    B

                </div>
            </div><div class="icon_wrapper">
                <div style="background-color: #000" class="icon l12">

                    F

                </div>
            </div><div class="icon_wrapper">
                <div style="background-color: #909090" class="icon l13">

                    M

                </div>
            </div>
</div>

提前致谢！

PS：这篇文章已被编辑。

Answer 1

我认为问题<div>默认情况下是100％宽度和显示块。尝试添加你的CSS：

div {
    float:left;
}

在一行上回应多个php函数输出

1 个答案: