Html css - как создать список столбцов?

Ответ 1

В идеальном мире вы можете использовать css3 column module, но, к сожалению, он в настоящее время частично поддерживается браузерами webkit и gecko (с использованием -webkit и - Мос).

Ответ 2

Если вас не интересует вертикальный порядок, а только макет:

1.      2.      3.       4.
5.      6.      7.       8.
9.      10.     11.      12.

Вы можете просто установить элементы li следующим образом:

li {
    display: block;
    width: 25%;
    float: left;
}

Он должен работать. Если вам нужно располагать их в вертикальном порядке, вам нужно действовать в php-скрипте, разделяя их на отдельные div, а затем перемещать их.

Ответ 3

Там была статья об A List Apart, которая охватывала именно этот вопрос. Я предполагаю, что если того, о чем упоминается, недостаточно, вы, конечно, всегда можете вернуться к серверному кодированию или на стороне клиента, чтобы разделить список автоматически тремя частями.

Ответ 4

Мне удалось получить правильный порядок с небольшим jQuery:

function splitList($list, n) {
    var i, k;
    var colHeight = Math.ceil($list.children().length / n)
    var colWidth = Math.floor(100 / n) + "%"

    for (i = 0; i < n; i++) {
        $list.append("<ul class='liCol'></ul>")
        for (k = 0; k < colHeight; k++) {
            $list.children("li").eq(0).appendTo(".liCol:last")          
        }   
    }

    $(".liCol").css("width", colWidth)
    $list.show() // list originally hidden to avoid displaying before ready
}

основные стили для .liCol:

.liCol {
    padding: 0px;
    margin: 0px;
    float: left;
}

Ответ 5

Я создал решение, которое также работает для упорядоченных (нумерованных) списков. Эти списки должны продолжить нумерацию по столбцам.

Добавьте на свою страницу script (неважно, где, лучше всего в отдельном js файле):

<script type="text/javascript">
// As soon as the document structure has been loaded:
document.addEventListener( "DOMContentLoaded", function() {
    // For each html elem:
    elems = document.getElementsByTagName("*"); // OL and UL wanted: chose all (*) here and select later.
    for ( var e = 0; e < elems.length; e++ ) {
        // Check if elem is a list (ordered/unordered) and has class name "cols":
        if ( ( elems[e].tagName == "OL" || elems[e].tagName == "UL" ) && elems[e].className.search("cols") > -1 ) {
            // Collect list items and number of columns (from the rel attribute):
            var list = elems[e];
            var listItems = list.getElementsByTagName("LI");
            var Ncols = list.getAttribute("rel")*1; // *1 converts rel from string to int.
            // Determine total number of items, items per column and column width:
            var Ntotal = listItems.length;
            var Npercol = Math.ceil( Ntotal/Ncols );
            var colWidth = Math.floor( 100/Ncols )+"%";
            // For each column:
            for ( var c = 0; c < Ncols; c++ ) {
                // Create column div:
                var colDiv = document.createElement("DIV");
                colDiv.style.cssFloat = "left";
                colDiv.style.width = colWidth;
                // Add list items to column div:
                var i_start = c*Npercol;
                var i_end = Math.min( (c+1)*Npercol, Ntotal );
                for ( var i = i_start; i < i_end; i++ )
                    colDiv.appendChild( listItems[0] ); // Using listItems[0] instead of listItems[i], because items are moved to colDiv!
                // Add column div to list:  
                list.appendChild( colDiv );
            }
        }
    }
} );
</script>

Затем вы можете просто создать несколько списков столбцов, например:

<ol class="cols" rel="3">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
</ol>

Итак, установка class= "cols" и rel= "[number_of_columns]", а script сделает все остальное!

Ответ 6

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

ul 
{
    list-style-type: none;
    counter-reset: section;

    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}

ul li 
{
    padding-left: 30px;
    position: relative;
}

ul li:before 
{
    counter-increment: section;
    content: counter(section) ".";
    margin: 0 0 0 -34px;
    text-align: right;
    width: 2em;
    display: inline-block;
    position: absolute;
    height: 100%;
}

jsfiddle

Ответ 7

Вы можете использовать 2D-преобразования: они имеют более широкую поддержку в современном браузере, чем столбцы CSS3. См. Мой ответ здесь

2 строковых элемента в горизонтальном div

Ответ 8

Поскольку у меня была такая же проблема и я не мог найти ничего "чистого", я думал, что отправил свое решение. В этом примере я использую обратный цикл while, поэтому я могу использовать splice вместо slice. Преимущество теперь в splice() требует только индекса и диапазона, где slice() нуждается в индексе и сумме. Последний имеет тенденцию становиться трудным во время цикла.

Недостаток: мне нужно отменить стек при добавлении.

Пример:

cols = 4; liCount = 35

для цикла с срезом = [0, 9]; [9, 18]; [18, 27]; [27, 35]

в обратном направлении, а с сращиванием = [27, 8]; [18, 9]; [9, 9]; [0, 9]

Код:

// @param (list): a jquery ul object
// @param (cols): amount of requested columns
function multiColumn (list, cols) {
    var children = list.children(),
        target = list.parent(),
        liCount = children.length,
        newUl = $("<ul />").addClass(list.prop("class")),
        newItems,
        avg = Math.floor(liCount / cols),
        rest = liCount % cols,
        take,
        stack = [];

    while (cols--) {
        take = rest > cols ? (avg + 1) : avg;
        liCount -= take;

        newItems = children.splice(liCount, take);
        stack.push(newUl.clone().append(newItems));
    }

    target.append(stack.reverse());
    list.remove();
}

Ответ 9

Итак, я изучил это и нашел решение, которое будет работать для всех браузеров.

Мой список HTML:

<ol class="list-items">
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
    <li class="second-list">Item5</li>
    <li class="second-list">Item6</li>
    <li class="second-list">Item7</li>
    <li class="second-list">Item8</li>
</ol>

Заметьте, что я дал последним 4 элементам списка класс второго списка, это важно для нашего jQuery.

Затем, на моей веб-странице, я сделал div с классом second-list-appender во втором столбце, в столбце, в котором я хочу, чтобы мой второй список находился.

var secondListStart = $(".list-items").children().length - 3;

$(".second-list-appender").append($("<ol start=" + secondListStart + ">"));
$(".second-list-appender ol").append($(".second-list"));
$(".second-list-appender").append($("</ol>"));

См., я на самом деле делаю 2 списка из 1, но сделаю их похожими на один список из 2 столбцов, давая начало второго списка следующего номера предыдущего списка.

Я сделал это с двумя столбцами, но вы можете просто повторить этот процесс или создать функцию и вызвать это в цикле, сколько раз вы хотите его повторить.

Надеюсь, это все равно поможет некоторым взглядам.