Плавающие неупорядоченные списки (UL) рядом друг с другом и складывают их в нижней части друг друга, без полей или пробелов

Question

У меня есть несколько элементов неупорядоченных списков (UL). Пожалуйста, проверьте изображение ниже:

что я хочу сделать, это плавать UL рядом друг с другом. UL имеют различную длину содержимого (LI), поэтому некоторые UL длиннее других. Когда я плаваю UL рядом друг с другом в слое div ограниченной ширины, в какой-то момент последние UL плавают внизу / слева. Однако ... если есть UL, который длиннее, будет немного места. Я хочу, чтобы UL плавали влево и укладывают друг другу, внизу каждого элемента UL, без пробелов. Есть ли способ достичь этого с помощью HTML / CSS?

плавающие UL слева друг от друга - это легко ... но я не знаю, как избавиться от наценки

----- ОБНОВЛЕНИЕ ----

это код, который я использую для генерации HTML ... фактически я изменил его с UL на TABLE, но это не меняет мою проблему. У меня есть несколько таблиц, которые могут варьироваться от 1 до 8. Ширина контейнера DIV, где будут появляться эти таблицы, может содержать до 4 столбцов. ТАБЛИЦЫ будут иметь различное количество строк, поэтому они будут различаться по длине.

$groups = array();
foreach ($related->posts as $post) {
    $groups[$post->post_type][] = $post;
}
foreach ($groups as $name => $posts) {
    printf('<table class="related-group related-%s "><tbody>', htmlspecialchars($name));
    foreach ($posts as $post) {
        printf('<tr class="related-item"><td><a href="'.get_permalink($post->ID).'" rel="permalink">'.get_the_post_thumbnail($post->id, '32').'</a></td><td><a href="'.get_permalink($post->ID).'" rel="permalink">'.$post->post_title.'</a></td></tr>');
    }
echo '</tbody></table>';
}

Answer 1

Что ж, это решение может и не дать конкретного ответа на ваш вопрос, но может помочь вам решить вашу проблему:

Вы не сможете сделать это, используя метод float, как вы предлагаете. Единственное решение, которое я могу придумать, состоит в том, чтобы разделить элементы на группы DIV s (или выбранный вами блочный элемент), которые плавают влево. По сути, вы помещаете каждый UL, принадлежащий той же оси Y, в некоторый элемент столбца:

<div class="col">
    <ul><!-- LI elements here --></ul>
    <ul><!-- LI elements here --></ul>
</div>

<div class="col">
    <ul><!-- LI elements here --></ul>
    <ul><!-- LI elements here --></ul>
</div>

<div class="col">
    <ul><!-- LI elements here --></ul>
</div>

<div class="col">
    <ul><!-- LI elements here --></ul>
</div>

Я знаю, что это не совсем семантически, потому что вы добавляете элементы исключительно для презентационных целей, однако я не вижу другого способа достичь этого (если вы не можете использовать абсолютное / относительное позиционирование - что может быть возможно, если Вы знаете количество элементов в каждом списке).

В качестве альтернативы, возможно, есть плагин jQuery или что-то в этом роде, которое позволит вам динамически размещать элементы, но я не знаю, в макушке.

Answer 2

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

Извините, не знаю, сможете ли вы добраться до этих ссылок.Кажется, сейчас jsfiddle.net находится под большой нагрузкой.

Answer 3

Хотя советы и предложения действительно были полезны,

Я решил проблему с jQuery Masonry, плагином jQuery

http://masonry.desandro.com/

Я не уверен, есть ли лучшие способы сделать это, но этот только что сработал

Isotope, другой плагин jQuery, похожий на Masonry, вероятно, мог бы выполнять ту же работу, что и Masonry, но я еще не тестировал: http://isotope.metafizzy.co/

спасибо, что прочитали и прочитали