TAGS :Viewed: 8 - Published at: a few seconds ago

[ How to put this php code into cloumus ]

I posted a question about 2 hour ago and I got many grate answers thank you guys you are just awesome ! and I am sorry to ask a new question so soon but I thought I can do it my self but this to hard for my level of knowledge .

So I go this code:

  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 />";
}

That taking an array that called "$stack" and having a people names inside it and printing it as list with a First letter as a title, here a screen shot of the output :

enter image description here

And I want it to look like something like this :

enter image description here

Can you help me making this code too look like the list in the second picture ? I am not a lazy person but I really don't have the knowledge to do this on my own so I will be very thankful if you could help me ! :)

Answer 1


You need to calculate the number of rows you want per column, then keep track of the current iteration. When the above number is reached, start a new column. The css for the columns can be as simple as setting a width and floating to the left:

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>

You can use <ul> to structure those data. Use display : inline-block in order to let the lists collapse between themselve from the right sides.