Подтвердить что ты не робот

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

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

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

floating wrong

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

floating right

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

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

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

floating different

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

jsFiddle demo

Ответ 2

Как уже упоминалось @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/

Ответ 3

Я знаю, что опаздываю на вечеринку, но кто-то просто связал этот вопрос с другим подобным, и я понял, что это не соответствует решению 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;
}

пример

Ответ 4

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

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

Ответ 5

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

Ответ 6

Первая опция

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

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

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

Ответ 7

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