Сетка на основе столбцов (например, masonry.js) с использованием float и clear

Привет, поэтому я хочу создать сетку на основе столбцов (две колонки), используя float и clear.

Идея состоит в том, чтобы дать левому блоку float:left и clear:left, а правому блоку — float:right и clear:right.

.left-block {
    float: left;
    clear: left;
}
.right-block {
    float: right;
    clear: right;
}

Но оказывается, это не работает. Можете ли вы сказать мне, почему это не сработает?

ссылка Jsfiddle

И почему этот один работает идеально.


html css masonry css-float
person Stefanus Thobi Sinaga    schedule 29.10.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Плавающие элементы не могут оказаться над предыдущим элементом на другой стороне (потому что он очищен). Таким образом, нет никакого способа получить правильный эффект стека, используя только плавающие элементы.

Для более подробного понимания того, как работает плавание и очистка, я рекомендую прочитать спецификацию.

Пока единственный способ получить макет каменной кладки без дополнительных контейнеров — использовать столбцы CSS. Пример можно найти здесь.

person hawc    schedule 29.10.2015
comment
но если вы откроете мою ссылку на jsfiddle, первые три левых блока хорошо складываются, а четвертый терпит неудачу. вот чего я не понимаю. этот работает отлично. - person Stefanus Thobi Sinaga; 29.10.2015
comment
@StefanusThobiSinaga Положение left-blocks определяется высотой right-blocks. left-block не может отображаться над right-block, который находится непосредственно перед ним (в html). Первые слева только складываются, потому что первый толкает два других слева вниз. Ваш второй пример работает только до тех пор, пока вы не добавите больше контейнеров (jsfiddle.net/o0omhgmr/2). С контейнерами меньшего размера все понятно (jsfiddle.net/144nyyas/1). Если бы left-blocks было выше, чем справа, поведение было бы таким же, только на противоположной стороне. - person hawc; 29.10.2015

arrow_upward
0
arrow_downward

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

CSS:

.wrapper {
    width: 70%;
}

.wrapperClear {
    content: "";
    display: table;
    clear: both;
}

.left-block {
    float: left;
    width: 50%;
}

.right-block {
    float: right;
    width: 50%;
}

HTML:

<div class="wrapper wrapperClear">
    <div class="left-block"></div>
    <div class="right-block"></div>
</div>
person Jayson    schedule 29.10.2015