Làm thế nào để hiển thị danh sách trong ba cột bằng cách sử dụng php?

Question

Đối với quá khứ vài giờ, tôi đã không thành công cố gắng tìm ra mã php để hiển thị một danh sách trong ba cột để nó có trật tự này

A D G 
B E H 
C F I 

nhưng tôi thực sự bị mất. Bất cứ ai có thể giúp tôi với điều này? Tôi hiện chỉ có mã liệt kê theo thứ tự này

A B C 
D E F 
G H I 

Đây là mã hiện tại của tôi:

echo '<table><tr>'; 
foreach ($categories as $k => $category) { 
    if ($k % 3 == 0 && $k ! = 0) { 
     echo '</tr><tr>'; 
    } 
    echo '<td><a href="category.php?category='.$category["id"].'">'.$category["category"].'</a></td>'; 
} 
echo '</table>'; 

Answer 1

Hãy thử điều này:

$columns = 3; 
$rows = ceil(count($categories)/$columns); 

echo '<table>'; 

for ($row = 0; $row < $rows; $row++) { 
    echo '<tr>'; 

    foreach ($categories as $k => $category) { 
     if ($k % $rows == $row) { 
      echo '<td><a href="category.php?category='.$category["id"].'">'.$category["category"].'</a></td>'; 
     } 
    } 

    echo '</tr>'; 
} 

echo '</table>'; 

Đó là không phải là rất hiệu quả, nhưng ngay bây giờ tôi không thể nghĩ ra cách làm tốt hơn.

Answer 2

Nếu bạn muốn có danh sách render trong các cột như đã nêu, bạn có thể tạo ra nó theo thứ tự hợp lý và chỉ sử dụng CSS columns tài sản để thiết lập trong các cột:

ul { 
    -moz-column-count: 2; 
    -webkit-column-count: 2; 
    column-count: 2; 
} 

Tin xấu là rằng điều này không được hỗ trợ bởi trình duyệt IE 9 trở về trước, nhưng các polyfills Cột như css3-multi-column.js có thể hoạt động tốt trong các trường hợp đơn giản (mặc dù các hạn chế và các vấn đề của chúng).

Answer 3

Tôi có vấn đề này giống nhau, và tôi gửi bài trả lời của tôi cho câu hỏi cũ này vì những lý do sau đây:

1. câu trả lời của tôi là tổng quát hơn và dễ dàng cho người khác để thích nghi.
2. Mảng của tôi là kết hợp, với khóa chuỗi. BTW, câu trả lời của tôi sẽ làm việc cho cả mảng kết hợp và lập chỉ mục.
3. Tôi không muốn một giải pháp CSS phức tạp, như một số câu trả lời khác về chủ đề này. Trên thực tế, giải pháp tôi đưa ra khá đơn giản - sử dụng nhiều thẻ với style = "float: left", bên trong một bảng khổng lồ. Trong khi tôi đã hoài nghi rằng việc có nhiều thẻ tbody trong một bảng duy nhất sẽ vượt qua xác thực HTML, thực tế nó đã vượt qua mà không có lỗi.

Một số điều cần lưu ý:

• $ numCols được số mong muốn của bạn cột.
• Vì chúng tôi là các mục nổi, bạn có thể cần đặt chiều rộng và chiều rộng tối thiểu của các phần tử gốc và/hoặc thêm một số < br style = "clear: both"/>, dựa trên tình huống của bạn.
• cho các phương pháp phân loại thay thế, xem http://php.net/manual/en/array.sorting.php

Dưới đây là câu trả lời đầy đủ của tôi:

function sortVertically($data = array()) 
{ 
    /* PREPARE data for printing */ 
    ksort($data);  // Sort array by key. 
    $numCols = 3; // Desired number of columns 
    $numCells = is_array($data) ? count($data) : 1 ; 
    $numRows = ceil($numCells/$numCols); 
    $extraCells = $numCells % $numCols; // Store num of tbody's with extra cell 
    $i   = 0; // iterator 
    $cCell  = 0; // num of Cells printed 
    $output  = NULL; // initialize 


    /* START table printing */ 
    $output  .= '<div>'; 
    $output  .= '<table>'; 

    foreach($data as $key => $value) 
    { 
     if($i % $numRows === 0) // Start a new tbody 
     { 
      if($i !== 0)   // Close prev tbody 
      { 
       $extraCells--; 
       if ($extraCells === 0) 
       { 
        $numRows--;  // No more tbody's with an extra cell 
        $extraCells--; // Avoid re-reducing numRows 
       } 
       $output .= '</tbody>'; 
      } 

      $output .= '<tbody style="float: left;">'; 
      $i = 0;     // Reset iterator to 0 
     } 
     $output .= '<tr>'; 
      $output .= '<th>'.$key.'</th>'; 
      $output .= '<td>'.$value.'</td>'; 
     $output .= '</tr>'; 

     $cCell++;     // increase cells printed count 
     if($cCell == $numCells){ // last cell, close tbody 
      $output .= '</tbody>'; 
     } 

     $i++; 
    } 

    $output .= '</table>'; 
    $output .= '</div>'; 
    return $output; 
} 

Tôi hy vọng bạn tìm thấy câu trả lời này hữu ích.