为什么这个br标签没有做任何事情

Question

我有一个PHP循环列出数据库的结果：

我所做的是在PHP中编写if语句，以便每次输出4个结果时，执行一行代码。然后我在这个循环中放入一个break标记，这样每4个结果就会有一个break <br />标记。它看起来像这样：

if ($i %4 == 0){
    echo "<br />";
    echo $i;
}

当我查看网站的源代码时，<br />标记就在那里，但它不会将其余信息移动到另一行。当我添加一行不同的代码时，例如，如果我打印<p>Hello</p>，它会输出'Hello'。

似乎<br />似乎不起作用。这导致前4个结束后屏幕结束后的所有结果。

这是整个页面和输出的屏幕截图：

<section class="hero is-dark is-halfheight is-bold">
<div class="hero-head">
</div>
  <div class="hero-body">
    <div class="container has-text-centered">
      <div class="columns">
      <?php
              $i = 0;   
              foreach($_SESSION['all'] as $result) {
              echo '<div class="column is-3">';
              echo '<a href="#">';
              echo '<div class="box has-text-centered">';
              echo $result;
              echo '</div>';
              echo '</a>';

              echo '</div>';

              $i++;
              if ($i %4 == 0){
                echo "<br />";
                echo $i;
              }
          }   
      ?>
      </div>
    </div>
  </div>
</section>

和...

Answer 1

正如评论中所提到的，Br将不起作用，您必须将代码包装在行div中，如下所示：

<section class="hero is-dark is-halfheight is-bold">
<div class="hero-head">
</div>
  <div class="hero-body">
    <div class="container has-text-centered">
      <div class="columns">
      <?php
        $i = 0;   
        foreach($_SESSION['all'] as $result) {
            if ($i %4 == 0){
            echo '<div class="row">';
            echo $i;
            }
            echo '<div class="column is-3">';
            echo '<a href="#">';
            echo '<div class="box has-text-centered">';
            echo $result;
            echo '</div>';
            echo '</a>';

            echo '</div>';

            $i++;
            if ($i %4 == 0){
            echo "</div>";
            echo $i;
            }
        }   
      ?>
      </div>
    </div>
  </div>
</section>

<style>
    .row {
        margin-bottom: 15px;
    }
</style>

Answer 2

我最好的选择是因为您的CSS样式会覆盖br行为。看一下下面的片段（在整页打开），多个br s什么都不做。

我认为你正在使用bulma CSS，而不会谈论它为什么会起作用，因为已经很好地解释了所写的文档。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">

<section class="hero is-dark is-halfheight is-bold">
  <div class="hero-body">
    <div class="container has-text-centered">
      <div class="columns">
        <div class="column is-3">
          <div class="box has-text-centered">
            Box 1 1
          </div>
        </div>
        <div class="column is-3">
          <div class="box has-text-centered">
            Box 1 2
          </div>
        </div>
        <div class="column is-3">
          <div class="box has-text-centered">
            Box 1 3
          </div>
        </div>
        
        <br>
        <br>
        <br>
        <br>
        
        <div class="column is-3">
          <div class="box has-text-centered">
            Box 2 1
          </div>
        </div>
        <div class="column is-3">
          <div class="box has-text-centered">
            Box 2 2
          </div>
        </div>
        <div class="column is-3">
          <div class="box has-text-centered">
            Box 2 3
          </div>
        </div>
        
      </div>
 
    </div>
  </div>
</section>

相反，将这些column包装在另一个columns容器中。就像下面一样，

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">

    <section class="hero is-dark is-halfheight is-bold">
      <div class="hero-body">
        <div class="container has-text-centered">
          <div class="columns">
            <div class="column is-3">
              <div class="box has-text-centered">
                Box 1 1
              </div>
            </div>
            <div class="column is-3">
              <div class="box has-text-centered">
                Box 1 2
              </div>
            </div>
            <div class="column is-3">
              <div class="box has-text-centered">
                Box 1 3
              </div>
            </div>
          </div>  

          <div class="columns">  
            <div class="column is-3">
              <div class="box has-text-centered">
                Box 2 1
              </div>
            </div>
            <div class="column is-3">
              <div class="box has-text-centered">
                Box 2 2
              </div>
            </div>
            <div class="column is-3">
              <div class="box has-text-centered">
                Box 2 3
              </div>
            </div>
            
          </div>
     
        </div>
      </div>
    </section>

那么，你的PHP代码很可能如下，

<section class="hero is-dark is-halfheight is-bold">
  <div class="hero-body">
    <div class="container has-text-centered">
    <?php
        $i = 0;
        $nextClosingDivShouldBePrinted = [];

        foreach($_SESSION['all'] as $result) {
            if ($i % 4 == 0){
              echo '<div class="columns">';
              $nextClosingDivShouldBePrinted[] = $i + 3; // there will be 3 'column' to wrap in for modulus 4.
            }

            echo '<div class="column is-3">';
            echo '<a href="#" class="box has-text-centered">';

            echo $result;

            echo '</a>';
            echo '</div>';

            if (in_array($i, $nextClosingDivShouldBePrinted)) {
                echo '</div>';
            }

            $i++; //always put loop increment at lowest part.
        }
    ?>
    </div>
  </div>
</section>