it-swarm.com.ru

Как плавать элементы с разной высотой?

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

Вот что происходит в данный момент:

Плавающий неправильно http://f.cl.ly/items/05233z0M0H0x1t1K331B/floating-wrong.png

Любые идеи о том, как заставить элементы плавать так:

плавающее право http://f.cl.ly/items/300e1s0o0p1r1P3k2U3z/floating-right.png

Я думаю, это должно работать с jQuery "кладкой", верно? Однако я работаю с Zepto.js и думаю, что плагин jQuery не будет работать.

Есть ли чистый CSS (CSS3) способ к этому? Какой-то трюк или так?

Если это не будет работать с чистым CSS или с JS, возможно ли это сделать:

плавающие разные http://f.cl.ly/items/0p3O1k0d332c242c0G0F/floating-different.png

Теперь вторая строка с элементами 5, 6 и 7 не «реально» плавает так, как вы ожидаете, но внутри нее есть скрытый разрыв строки (clearfix).

Есть ли способ для этого с чистым CSS? Например. используйте nth-child(4n+4) и псевдо-селектор, такой как :after, чтобы применить разрыв строки с content?

Есть идеи по этому поводу? Какие-нибудь умные уловки, чтобы заставить это работать?

26
matt

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

div#wrapper > *:nth-child(4n+1) {
   clear: both;
}

jsFiddle demo

31
Pevara

Как уже упоминалось @Arieljuod, вы можете использовать display: inline-block вместо float. Прелесть этого в том, что он будет работать во всех браузерах (включая IE7 + со взломом ниже) и является абсолютно плавным:

div {
    ...
    display: inline-block;
    vertical-align: top;
    margin-bottom: 0.3em;
    *display: inline;
    *margin-right: 0.3em;
    *zoom: 1;
    ...   
}

Рабочий пример: http://jsfiddle.net/cRKpD/1/

21
My Head Hurts

Я знаю, что этот вопрос пропускает решение flexbox ...
(которого не было, когда задавался вопрос).

Добавьте нужные префиксы поставщиков и удалите ненужные в вашем CSS

.parent {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -moz-box;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}

example

1
Andrei Gheorghiu

для второй опции, вместо «float: left», используйте «display: inline-block», вы даже можете комбинировать это с text-align: center, чтобы всегда заполнять 100%, кроме последней строки

для первого варианта вы можете поместить 1 и 5 в контейнер onw, 2 и 6 в другой, и так один, затем вы плаваете эти контейнеры

0
arieljuod

Немного опоздал, но поставил 1 в дополнительный делитель. Затем поместите 7 в этот делитель (вам нужно отрегулировать делитель так, чтобы 7 отображалось ниже 1). Может быть полезно использовать overflow: видимый в этом разделителе.

0
BK14

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

0
Jack

Первый вариант

CSS многостолбцовый макет , когда он будет должным образом стандартизирован и поддержан, может предложить гибкий способ сделать это.

Единственное другое CSS-решение, которое приходит на ум, хотя оно и может быть недостаточно адаптивным, - это группировать элементы в контейнерах столбцов (1 и 5, затем 2 и 6, затем 3 и 7, затем 4).

Помимо этих двух вариантов, я считаю, JS требуется.

0
Matt Coughlin