PHP Список элементов массива в таблице Строки из 3

Я видел пару примеров того, о чем я думаю, но они не совсем то, что я ищу... извинения, впереди, если это дубликат сообщения:

Итак, у меня есть эта функция, которая читает элементы в массиве, которые я добавляю регулярно (в настоящее время у меня более 50 элементов в списке). Он помещает все в список (<ul> ).

function getListItems()
{
$listItems = array(
    1 => "List Item 1",
    2 => "List Item 2",
    3 => "List Item 3",
    4 => "List Item 4",
    5 => "List Item 5",
    6 => "List Item 6",
    7 => "List Item 7",
    8 => "List Item 8",
    9 => "List Item 9",
    10 => "List Item 10",
    11 => "List Item 11",
    12 => "List Item 12",
    13 => "List Item 13",
    14 => "List Item 14",
    15 => "List Item 15",
);

$fullList = "<ul>";
foreach($listItems as $itemId=>$itemName)
{
    $fullList .= "<li><a href='somePage.php?id=" .$itemId. "'>" .$itemName. "</a></li>";
}
$fullList .= "</ul>";
return $fullList;
}

НО, что я хотел бы сделать, в конечном счете, создать способ отображения его в таблице, на экране в строках из трех...

Вместо того, что он делает в данный момент, и просто перечисляя все, что вам нужно прокрутить "навсегда".

Это - это то, что я в настоящее время выводят... (да, это несколько мобильное устройство).

Ответы

Ответ 1

Я бы использовал CSS - в частности свойство count-count.

Взгляните на это руководство, чтобы увидеть, как работают столбцы CSS: https://css-tricks.com/guide-responsive-friendly-css-columns/

Примечание. Это НЕ PHP.

Вот скрипка, показывающая, что это работает с чем-то вроде вывода вашего кода.

http://jsfiddle.net/j86fu084/

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

Вы также можете добавить класс к элементу UL и использовать стили CSS, используя это.

Ответ 2

Чтобы сделать что-то подобное без таблиц (что позволит ему реагировать), вы должны сделать это:

PHP

function getListItems()
{
    $listItems = array(
        1 => "List Item 1",
        2 => "List Item 2",
        3 => "List Item 3",
        4 => "List Item 4",
        5 => "List Item 5",
        6 => "List Item 6",
        7 => "List Item 7",
        8 => "List Item 8",
        9 => "List Item 9",
        10 => "List Item 10",
        11 => "List Item 11",
        12 => "List Item 12",
        13 => "List Item 13",
        14 => "List Item 14",
        15 => "List Item 15",
    );

    $fullList = "<div id='myList'>";
    foreach($listItems as $itemId => $itemName)
    {
        $fullList .= "<span><a href='somePage.php?id={$itemId}'>{$itemName}</a></span>";
    }
    $fullList .= "</div>";
    return $fullList;
}

CSS

#myList, #mylist>* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

#myList {
    display: block;
    width: 100%;
}

#myList>span {
    display: inline-block;
    width: 33%;
}

/* mobile stylesheet */
@media(max-width: 600px) {
    #mylist>span {
        width: 100%;
    }
}

Совет: заставить мобильные устройства использовать ширину экрана 320 пикселей и отключить масштабирование (необязательно)

<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,target-densitydpi=device-dpi, user-scalable=no" />

Вы можете пометить промежутки, чтобы они выглядели как таблицы, а столбцы будут одинаковой ширины. Свойство box-sizing сделает так, чтобы при вычислении ширины элемента не учитывались поля и границы. Нет строк, поэтому ширина столбцов не только текучая, но вы можете уменьшить до 1 столбца для небольших экранов и даже выполнять точки останова для мониторов большого размера.