CSS-стеки

Question

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

Это так? и если да, то как я могу это сделать? Заранее спасибо!

http://jsfiddle.net/K5zjc/

Answer 1

Попробуйте что-то вроде this jsFiddle .Технически, вы перемещаете даже .box элементов вправо, а не влево, и затем вы получаете самозаполняющиеся столбцы в соответствии с их содержимым.Итак, в вашем CSS вы добавляете:

.box:nth-child(odd) {clear: left}
.box:nth-child(even) {float: right; clear: right}

ОБНОВЛЕНИЕ

Очевидно, что это решение не будет работать хорошо, если у вас есть больше, чем эти конкретные блоки.Так что, вероятно, jQuery Masonry - единственный способ получить хороший результат.

Answer 2

Вы должны добавить два div с float: left, которые действуют как столбцы.

См .: http://jsfiddle.net/K5zjc/5/

<div style="width:200px;">
    <div class="boxContainer">
        <div class="box green">
            <ul><li>Item</li></ul>
        </div>
        <div class="box yellow">
            <ul><li>Item</li><li>Item</li></ul>
        </div>
    </div>
    <div class="boxContainer">
        <div class="box red">
            <ul><li>Item</li><li>Item</li><li>Item</li><li>Item</li></ul>
        </div>
        <div class="box cyan">
            <ul><li>Item</li><li>Item</li></ul>
        </div>
    </div>
</div>