我如何在 PHP 中使用 HTML，特别是用 DIV 标签包装输出？

Question

我将发布我到目前为止所做的事情，并完全披露我根本不精通 PHP。

我试图添加 DIVS 来帮助我为 PHP 输出创建布局结构。它大部分出现在页面上，但我很难让一些 flexbox 样式起作用。

我猜这是因为我在错误的地方将 HTML 包装在 PHP 周围。

<?php if ( have_rows( 'category_listing' ) ) : ?>

<div class="category-container">

    <?php while ( have_rows( 'category_listing' ) ) : the_row(); ?>

    <div class="category-wrapper">

        <div class="category-title">

        <h3><?php the_sub_field( 'category_title' ); ?></h3>

        </div>

        <div class="columns-2">

            <div class="category-icon">

            <?php $icon = get_sub_field( 'icon' ); ?>

            <?php if ( $icon ) { ?>

                <img src="<?php echo $icon['url']; ?>" alt="<?php echo $icon['alt']; ?>" />

            <?php } ?>

            </div>

            <div class="category-item-list">

            <?php if ( have_rows( 'item_list' ) ) : ?>

            <ul class="category-list">

                <?php while ( have_rows( 'item_list' ) ) : the_row(); ?>

                <li>

                    <?php the_sub_field( 'item' ); ?>

                </li>

                <?php endwhile; ?>

            </ul>

            </div>

        </div>

    </div>

        <?php else : ?>

            <?php // no rows found ?>

        <?php endif; ?>

    <?php endwhile; ?>

<?php else : ?>

    <?php // no rows found ?>

</div>

<?php endif; ?>

Answer 1

这是要使用的经过验证的 PHP 代码。在 PHP 代码中，您提供了if&之类的条件while以及div它们内部未按正确顺序关闭的条件。<?php if (have_rows('category_listing')): ?>&nbsp; <div class="category-container">&nbsp; <?php while (have_rows('category_listing')): the_row(); ?>&nbsp; &nbsp; <div class="category-wrapper">&nbsp; &nbsp; &nbsp; <div class="category-title">&nbsp; &nbsp; &nbsp; &nbsp; <h3><?php the_sub_field('category_title'); ?></h3>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="columns-2">&nbsp; &nbsp; &nbsp; &nbsp; <div class="category-icon">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php $icon = get_sub_field('icon'); ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php if ($icon): ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="<?php echo $icon['url']; ?>" alt="<?php echo $icon['alt']; ?>" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php else: ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php /* icon not found */ ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php endif; ?>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="category-item-list">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php if (have_rows('item_list')): ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul class="category-list">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php while (have_rows('item_list')): the_row(); ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php the_sub_field('item'); ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php endwhile; ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php else: ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php /* no rows found */ ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php endif; ?>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; <?php endwhile; ?>&nbsp; </div><?php else: ?>&nbsp; <?php /* no rows found */ ?><?php endif; ?>查看设计，似乎应该category-wrapper在category-title无序列表上居中对齐。假设我们将您在问题中分享的 PHP 代码保留为常数，并且不对其进行任何更改。而不是使用 then 来管理设计要求css，下面堆栈片段中使用的样式应该可以满足您的目的。您可以进一步细化样式。我使用了问题中提供的类名，并采用了基于设计的样式。body {&nbsp; background-color: #fff;}.category-container {&nbsp; display: flex;&nbsp; width: 100%;&nbsp; font-family: Arial, sans-serif;&nbsp; color: red;&nbsp; flex-wrap: wrap;&nbsp; flex-direction: column;&nbsp; height: 600px;}.category-wrapper {&nbsp; display: block;&nbsp; width: 50%;&nbsp; padding: 20px;&nbsp; box-sizing: border-box;&nbsp; border: 1px solid red;}.category-title {&nbsp; font-weight: bold;&nbsp; text-transform: uppercase;&nbsp; text-align: center;&nbsp; margin-bottom: 1rem;&nbsp; margin-left: 30%;}.columns-2 {&nbsp; display: flex;}.category-icon {&nbsp; width: 30%;&nbsp; text-align: center;}.category-icon img {&nbsp; border-radius: 50%;}.category-item-list {&nbsp; width: 70%;}.category-list {&nbsp; column-count: 2;&nbsp; margin-top: 0;}.category-list li {&nbsp; word-wrap: break-word;&nbsp; padding-right: 1rem;&nbsp; hyphens: auto;}<div class="category-container">&nbsp; <div class="category-wrapper">&nbsp; &nbsp; <div class="category-title">&nbsp; &nbsp; &nbsp; Category Title 1&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="columns-2">&nbsp; &nbsp; &nbsp; <div class="category-icon">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/100/FF0000/FFFFFF" />&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="category-item-list">&nbsp; &nbsp; &nbsp; &nbsp; <ul class="category-list">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item verylonglengthword</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="category-wrapper">&nbsp; &nbsp; <div class="category-title">&nbsp; &nbsp; &nbsp; Category Title 2&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="columns-2">&nbsp; &nbsp; &nbsp; <div class="category-icon">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/100/FF0000/FFFFFF" />&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="category-item-list">&nbsp; &nbsp; &nbsp; &nbsp; <ul class="category-list">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item verylonglengthword</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="category-wrapper">&nbsp; &nbsp; <div class="category-title">&nbsp; &nbsp; &nbsp; Category Title 3&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="columns-2">&nbsp; &nbsp; &nbsp; <div class="category-icon">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/100/FF0000/FFFFFF" />&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="category-item-list">&nbsp; &nbsp; &nbsp; &nbsp; <ul class="category-list">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item verylonglengthword</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="category-wrapper">&nbsp; &nbsp; <div class="category-title">&nbsp; &nbsp; &nbsp; Category Title 4&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="columns-2">&nbsp; &nbsp; &nbsp; <div class="category-icon">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/100/FF0000/FFFFFF" />&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="category-item-list">&nbsp; &nbsp; &nbsp; &nbsp; <ul class="category-list">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item verylonglengthword</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 2

我为此使用 Bootstrap。以下代码不会在代码片段上运行，但您可以复制并粘贴到 php 正在运行的位置<!doctype html><html><head>&nbsp; <title>Bootstrap Example</title>&nbsp; <meta charset="utf-8">&nbsp; <meta name="viewport" content="width=device-width, initial-scale=1">&nbsp; <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">&nbsp; <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>&nbsp; <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script></head><body>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <?php&nbsp; &nbsp; &nbsp; &nbsp; //SHOULD BE A MATRIX, SAME NUMBER OF COLUMNS&nbsp; &nbsp; &nbsp; &nbsp; $cars = array&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; array("Volvo",22,18),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; array("BMW",15,13),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; array("Saab",5,2),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; array("Land Rover",17,15),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; array("Ferrari",17,15)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $tanks = array&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; array("Hellcat",220,180),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; array("Tiger",150,130),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; array("ISU",500,200),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; array("Cromwell",170,150)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $fruits = array&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; array("Apple",22,18),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; array("Banana",15,13),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; array("Watermelon",5,2),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $colors = array&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; array("Black",2,8),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; array("White",1,3),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; array("Blue",5,0),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; array("Green",7,1),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; array("Yellow",5,0)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; try {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //If questions about css verify how Bootstrap 3 works&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; print '<div class="container">';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; print '<div class="row">';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //FOR CARS&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; print '<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for($x=0;$x<count($cars);$x++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for($y=0;$y<count($cars[$x]);$y++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; print "<p>".$cars[$x][$y]."</p>";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; print '</div>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //FOR TANKS&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; print '<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for($x=0;$x<count($tanks);$x++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for($y=0;$y<count($tanks[$x]);$y++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; print "<p>".$tanks[$x][$y]."</p>";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; print '</div>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; print '</div>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; print '</div>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//If questions about css verify how Bootstrap 3 works&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; print '<div class="container">';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; print '<div class="row">';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //FOR FRUITS&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; print '<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for($x=0;$x<count($fruits);$x++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for($y=0;$y<count($fruits[$x]);$y++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; print "<p>".$fruits[$x][$y]."</p>";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; print '</div>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //FOR COLORS&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; print '<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for($x=0;$x<count($colors);$x++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for($y=0;$y<count($colors[$x]);$y++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; print "<p>".$colors[$x][$y]."</p>";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; print '</div>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; print '</div>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; print '</div>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; catch(Exception $e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo 'Message: ' .$e->getMessage();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ?></body></html>