UL / LI, который стекает вниз, затем вправо, когда он выходит из комнаты

Question

Я пытаюсь создать HTML / CSS для нижнего колонтитула.

То, что я хотел бы иметь, это основные разделы как отдельные ul, а затем каждый подраздел как li внутри.

Уль будет иметь фиксированную высоту, и ли будет течь вниз. Если им не хватит места для спуска, я бы хотел, чтобы они снова начали с правой стороны.

Я подумал, что это будет довольно просто, и попробовал это со следующим HTML / CSS

<ul class="my_ul">
<li class="bold"> Home </li>
</ul>
<ul class="my_ul">
<li class="bold"> Catalogue </li>
<li> Category 1 </li>
<li> Category 2 </li>
<li> Category 3 </li>
<li> Category 4 </li>
<li> Category 5 </li>
</ul>
<ul class="my_ul">
<li class="bold"> Company </li>
<li> Company 1 </li>
<li> Company 2 </li>
<li> Company 3 </li>
<li> Company 4 </li>
<li> Company 5 </li>
</ul>


.my_ul {
height: 130px;
float: left;
}
.my_ul li {
float: left;
clear: left;
list-style: none;
}

Вышеописанное работает, за исключением того, что, когда оно достигает дна ул, оно продолжает идти. Очевидно переполнение: скрытое делает его исчезающим, но это не то, что я хочу. Я хочу, чтобы он начал новый столбец справа.

Есть идеи, как мне это улучшить?

Answer 1

В настоящее время существует решение только для CSS для этой проблемы.Гибкая модель CSS3 позволяет достичь желаемого эффекта только с помощью CSS.

ul {
    display: flex;
    flex-flow: column wrap;
}

http://jsfiddle.net/2Dr6E/

Это обеспечит поток содержимого ul (теги li) сверху вниз.снизу, а затем слева направо после заполнения высоты ul.

Это поддерживается в большинстве последних браузеров Chrome, Opera, Firefox и IE11, а также в Safari и (с -webkit-префикс) и IE10 с префиксом -ms-.

Answer 2

Для столбцов вы можете использовать CSS3, хотя он не будет работать ни в старых браузерах, ни в IE9 RC.

#yourfooter
{
column-count: 3;
}

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

Answer 3

Я нашел способ ... только CSS, используя селектор nth-child. (Это может вызвать проблемы в старых браузерах).

Смотрите демо здесь: http://jsfiddle.net/MYB7g/3/

Вот соответствующий CSS:

ul {
    white-space: nowrap;
    margin: 0;
    padding: 0;
    margin-bottom: 100px;  /* space the two demos apart */
}

li {
    width: 180px;
    height: 30px;
    background-color: rgba(0,0,255,.5);
    color: white;
    padding: 5px;
    margin: 0px;
    border-radius: 8px;
    font-family: Helvetica;
    font-size: 24px;
    line-height: 30px;
    display: inline-block;
}


/******************************************/
/*  N = 2                                 */
/******************************************/

ul.rows2 {
    margin-left: 180px; /* li.width * (N-1) */
}

ul.rows2 li {
    margin-left: -180px; /* -(li.width * (N-1)) */
}

ul.rows2 li:nth-child(even) {
    background-color: rgba(255,0,255,.5);
    position: relative;
    top: 50px;        /* li.height + vertical spacing */
    left: -195px;     /* -(li.width + horizontal spacing */

    margin-left: 0px;
}

/******************************************/
/*  N = 3                                 */
/******************************************/

ul.rows3 {
    margin-left: 360px; /* li.width * (N-1) */
}

ul.rows3 li {
    margin-left: 0px;
}

ul.rows3 li:nth-child(3n+1) { /* top */
    margin-left: -360px; /* -(li.width * (N-1)) */
}

ul.rows3 li:nth-child(3n+2) { /* second */
    background-color: rgba(255,0,0,.5);
    position: relative;
    top: 50px;        /* li.height + vertical spacing */
    left: -195px;     /* -(li.width + horizontal spacing */
}

ul.rows3 li:nth-child(3n+3) { /* bottom */
    background-color: rgba(255,0,255,.5);
    position: relative;
    top: 100px;       /* 2*(li.height + vertical spacing */
    left: -390px;     /* -2*(li.width + horizontal spacing */
}

Answer 4

К сожалению, вы не можете делать с чистым CSS. Вы можете с комбинацией JavaScript и CSS.