Question

我可以在此代码中更改哪些内容以使This的输出看起来像This

这两个'This'链接是布局的屏幕截图 我想让所有的盒子在线/相邻，就像第二个截图一样。

我在html中编写了布局，并且在尝试使用php时布局刚刚搞砸了。

product-details.js

Answer 1

将所有html从echos中取出，然后将PHP插入到html中。首先，您需要确定需要循环的html区域，例如，如果我的原始html是这样的：

<div class="row">
    <div class="col-xs-12 col-sm-4">
        Box 1
    </div>
    <div class="col-xs-12 col-sm-4">
        Box 2
    </div>
    <div class="col-xs-12 col-sm-4">
        Box 3
    </div>
</div>

但我想动态生成3个框，我的PHP就是这样的，你可以将它包装在一个函数中：

<?php
function outputStuff(){

    $contents = array("Box 1","Box 2","Box3");
?>

    <div class="row">

    <?php foreach($contents as $value):?>

        <div class="col-xs-12 col-sm-4">

            <?php echo $value; ?>

        </div>

    <?php endforeach;?>

    </div>

<?php 
} // end the function 
?>

row必须在循环之外，否则将为每个项目创建并清除列上的浮动。使用这些基本原则，您将实现您想要的目标。

Answer 2

我看到你正在使用bootstrap，我建议你使用这种结构

Take a look on this page

<div class="container">
    <div class="row">
        <span class="col-lg-3 col-sm-12 picture">
            <img class="img-thumbnail" src="//placehold.it/200x200">   
        </span>

        <span class="col-lg-3 col-sm-12">
            <img class="img-thumbnail" src="//placehold.it/200x200">   
        </span>

        <span class="col-lg-3 col-sm-12">
            <img class="img-thumbnail" src="//placehold.it/200x200">   
        </span>

        <span class="col-lg-3 col-sm-12">
            <img class="img-thumbnail" src="//placehold.it/200x200">   
        </span>
    </div></div>

php循环重复执行

2 个答案: