Question

我在2小时前发布了一个问题，我得到了许多谢谢答案谢谢你们，你们真棒！我很抱歉这么快就提出一个新问题，但我认为我可以自己做，但这对我的知识水平很难。

所以我去了这段代码：

  echo strtoupper($current_letter) . PHP_EOL;
foreach($stack as $values) {
    if( $values[0] != $current_letter ) {
        $current_letter = $values[0];
        echo '<h3>'. mb_substr(mb_strtoupper($values, "utf-8"),0,1,'utf-8') . PHP_EOL . '</h3>';      

    }  

    echo $values . "<br />";
}

采用一个名为＆＃34; $ stack＆＃34;的数组。并在其中有一个人名，并以第一个字母作为标题打印为列表，这里是输出的屏幕截图：

enter image description here

我希望它看起来像这样：

enter image description here

你能帮助我让这段代码看起来像第二张图片中的列表吗？我不是一个懒惰的人，但我真的不知道自己这样做，所以如果你能帮助我，我将非常感激！：）

Answer 1

您需要计算每列所需的行数，然后跟踪当前的迭代次数。达到上述数字后，启动新列。列的css可以像设置宽度一样简单并浮动到左侧：

的CSS：

div.col{
    width:25%;
    float:left;
}

PHP：

$lines_per_col = count($stack)/4;

$counter = 0;
echo '<div class="col">';
echo strtoupper($current_letter) . PHP_EOL;
foreach($stack as $values) {
    if( $values[0] != $current_letter ) {
        $current_letter = $values[0];
        echo '<h3>'. mb_substr(mb_strtoupper($values, "utf-8"),0,1,'utf-8') . PHP_EOL . '</h3>';      

    }  

    echo $values . "<br />";
    if(($counter++ % $lines_per_col)==0){
        echo '</div><div class="col">';
    }
}
echo '</div>';

Answer 2

ul {
  list-style-type : none;
  
  display : inline-block;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8" />
    <title> test </title>
  </head>
  <body>
    <ul>
      <li>
        <ul>
          <li> <b>A</b> </li>
          <li> Alter </li>
          <li> Acrobat </li>
          <li> Air </li>
        </ul>
        <br />
        <br />
      </li>
      <li>
        <ul>
          <li> <b>B</b> </li>
          <li> Big </li>
          <li> Battle </li>
          <li> Beast </li>
        </ul>
      </li>
    </ul>
    <ul>
      <li>
        <ul>
          <li> <b>C</b> </li>
          <li> Computer </li>
          <li> Castle </li>
          <li> Character </li>
        </ul>
        <br />
        <br />
      </li>
      <li>
        <ul>
          <li> <b>D</b> </li>
          <li> DOM </li>
          <li> Data </li>
          <li> Dinosaur </li>
        </ul>
      </li>
    </ul>
  </body>
</html>

您可以使用<ul>来构建这些数据。使用display : inline-block可让列表在右侧之间折叠。

如何将这个PHP代码放入cloumus

2 个答案: