Css-столбцы/flexbox без пробелов между элементами

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

Используя flexbox, столбцы css и другие трюки, мне нужно уговорить pinterest-подобный макет. (Pinterest использует javascript и абсолютное позиционирование для своего макета, он даже не отображается с выключенным js.) На сайте есть ящики с известной шириной, но с переменной высотой. Количество столбцов должно варьироваться в зависимости от ширины браузера. (Я могу сделать это с помощью медиа-запросов, если я знаю, что изменить атрибут css.) Вот что это выглядит: через

gaps

Также обратите внимание, что я не могу просто увеличить высоту контейнеров, чтобы заполнить пустое пространство. Я хочу принести элемент под ним UP, а не выполнить все высоты. (Таким образом, растягивание элементов 1, 3 и 4 на рисунке выше НЕ является тем, что я хочу.)

Вещи, которые я пробовал:

  • CSS 3 столбцы. Это выглядит великолепно, но предметы находятся в неправильном порядке, причем второй элемент находится под первым. Если это можно изменить на другой порядок, так что они идут влево-вправо, отлично!

  • Flexbox различные конфигурации flexbox, я пробовал практически все настройки, которые я смог изменить.

  • Javascript. Да, я знаю, что могу вручную создавать столбцы и повторно отображать их при изменении размера. Я стараюсь избежать дорогостоящей операции повторного рендеринга, которая требует ручной балансировки столбцов и отображения. Я могу прибегнуть к этому для старых браузеров, которые не поддерживают решение css3. Я также хочу не вручную позиционировать все элементы. Гросс.

Я добавил ссылку на комментарий к JSFiddle, потому что я не могу включить его здесь как "ссылки на jsfiddle require code".

Ответы

Ответ 1

проверьте эту демонстрацию. Это чистый эффект каменной кладки css3. http://w3bits.com/labs/css-masonry/

спинет из приведенной выше ссылки

body {
    font: 1em/1.67 'Open Sans', Arial, Sans-serif;
    margin: 0;
    background: #e9e9e9;
}

.wrapper {
    width: 95%;
    margin: 3em auto;
}

.masonry {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
}

.item {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    height: 150px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}
.item.black{
background-color: #000; height:200px;}
.item.blue{
background-color:blue; height:250px;}
.item.green{
background-color:green; height:300px;}

@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}

@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;
    }
}
<div class="masonry">
   <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
   <div class="item black">...</div>
   <div class="item blue">...</div>
   <div class="item green">...</div>
  <div class="item black">...</div>
   <div class="item blue">...</div>
   <div class="item green">...</div>
  <div class="item black">...</div>
   <div class="item blue">...</div>
   <div class="item green">...</div>
</div>

Ответ 2

Вы можете достичь этого с помощью flexbox:

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

CSS

.container {
  max-width: 900px;
  height: 470px;
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
}

.item {
  height: 150px;
}

http://codepen.io/asim-coder/pen/vXzKgg

Ответ 3

CSS3: Задайте основную ul li, которая удерживает все 8 раскрывающихся панелей в поле: 0 auto;

mainList li {
   margin: 0 auto; /*0 giving no margins on the top and bottom of the panels, and auto making the panels use all of the space within the parent, mainList. I hope this helps.*/
}

Ответ 4

Хорошо, немного поздно, может быть, это может быть решением.

Я использую flex, поскольку это единственная система, которая может изменить порядок, как вы хотите.

В методе drawbakcs этот метод состоит в том, что мне нужно использовать некоторые искусственные элементы для работы в качестве разделителей и что мне нужно установить заданную высоту на контейнере

.container {
  border: 1px solid black;
  width: 90%;
  height: 700px;
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
}
.item {
  height: 150px;
  width: 24%;
  margin: 2px;
}
.item:nth-child(3n + 1) {
  height: 200px;
}
.item:nth-child(3n + 2) {
  height: 250px;
}
.item:nth-child(4n) {
  background-color: orange;
  order: 40;
}
.item:nth-child(4n + 1) {
  background-color: green;
  order: 10;
}
.item:nth-child(4n + 2) {
  background-color: lightblue;
  order: 20;
}
.item:nth-child(4n + 3) {
  background-color: yellow;
  order: 30;
}
.divider {
  width: 1px;
  background-color: red;
  height: 100%;
}
.divider:nth-last-child(3) {
  order: 15;
}
.divider:nth-last-child(2) {
  order: 25;
}
.divider:nth-last-child(1) {
  order: 35;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="divider"></div>
  <div class="divider"></div>
  <div class="divider"></div>
</div>

Ответ 5

Используйте http://desandro.github.io/masonry/ Масонство поможет решить вашу проблему, это то, что использует Pinterest. Моя компания в настоящее время использует ее для разработки программы, она очень проста и удобна для пользователя.