Макет кладки с использованием CSS

Я работаю с кладкой, используя column-count в css. Здесь я получил макет каменной кладки, но у меня проблема в том, что когда я добавлял контент, второй столбец div делился на части, половина div перемещалась в столбец1 и половина в столбце2 в соответствии с высотой содержимого. Мой вопрос, как мне добиться этого макета кладки с помощью css. Макет кладки с использованием CSS

#container {
  width: 70%;
  margin: 0 auto;
  background-color: red;
}

.cols {
  -moz-column-count: 3;
  -moz-column-gap: 3%;
  -moz-column-width: 30%;
  -webkit-column-count: 3;
  -webkit-column-gap: 3%;
  -webkit-column-width: 30%;
  column-count: 3;
  column-gap: 3%;
  column-width: 30%;
}

.box {
  margin-bottom: 20px;
}

.box.one {
  height: auto;
  background-color: #d77575;
}

.box.two {
  height: auto;
  background-color: #dcbc4c;
}

.box.three {
  background-color: #a3ca3b;
  height: auto;
}

.box.four {
  background-color: #3daee3;
  height: auto;
}

.box.five {
  background-color: #bb8ed8;
  height: auto;
}

.box.six {
  background-color: #baafb1;
  height: auto;
}

article.post__layout {
  box-shadow: 0 0px 7px 0 rgba(75, 122, 175, 0.33);
}

.image {
  width: 100%;
  height: auto;
}

img {
  width: 100%;
  height: auto;
}

p {
  padding: 40px 20px;
}
<div id = "container" class = "cols">
  <div class = "box one">
    <article class = "post__layout">
      <div class = "image">
        <img src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae ests in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem
        vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam rutrs in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat
        porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam rutr ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam rutrum vitae placerat
        porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class = "box two">
    <article class = "post__layout">
      <div class = "image">
        <img src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class = "box one">
    <article class = "post__layout">
      <div class = "image">
        <img src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class = "box three">
    <article class = "post__layout">
      <div class = "image">
        <img src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class = "box two">
    <article class = "post__layout">
      <div class = "image">
        <img src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class = "box five">
    <article class = "post__layout">
      <div class = "image">
        <img src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class = "box one">
    <article class = "post__layout">
      <div class = "image">
        <img src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class = "box two">
    <article class = "post__layout">
      <div class = "image">
        <img src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class = "box six">
    <article class = "post__layout">
      <div class = "image">
        <img src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class = "box three">
    <article class = "post__layout">
      <div class = "image">
        <img src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class = "box two">
    <article class = "post__layout">
      <div class = "image">
        <img src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
</div>
jquery css html masonry
18.07.2018 10:12
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
0
0
60
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я обновил ваш код, добавив опору break-inside: avoid;. Проверить опору здесь

#container {
  width: 70%;
  margin: 0 auto;
  background-color: red;
}

.cols {
  -moz-column-count: 3;
  -moz-column-gap: 3%;
  -moz-column-width: 30%;
  -webkit-column-count: 3;
  -webkit-column-gap: 3%;
  -webkit-column-width: 30%;
  column-count: 3;
  column-gap: 3%;
  column-width: 30%;
}

.box {
  margin-bottom: 20px;
box-sizing: border-box;
-webkit-column-break-inside: avoid;
break-inside: avoid;
counter-increment: item-counter;
}

.box.one {
  height: auto;
  background-color: #d77575;
}

.box.two {
  height: auto;
  background-color: #dcbc4c;
}

.box.three {
  background-color: #a3ca3b;
  height: auto;
}

.box.four {
  background-color: #3daee3;
  height: auto;
}

.box.five {
  background-color: #bb8ed8;
  height: auto;
}

.box.six {
  background-color: #baafb1;
  height: auto;
}

article.post__layout {
  box-shadow: 0 0px 7px 0 rgba(75, 122, 175, 0.33);
}

.image {
  width: 100%;
  height: auto;
}

img {
  width: 100%;
  height: auto;
}

p {
  padding: 40px 20px;
}
<div id = "container" class = "cols">
  <div class = "box one">
    <article class = "post__layout">
      <div class = "image">
        <img src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae ests in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem
        vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam rutrs in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat
        porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam rutr ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam rutrum vitae placerat
        porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class = "box two">
    <article class = "post__layout">
      <div class = "image">
        <img src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class = "box one">
    <article class = "post__layout">
      <div class = "image">
        <img src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class = "box three">
    <article class = "post__layout">
      <div class = "image">
        <img src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class = "box two">
    <article class = "post__layout">
      <div class = "image">
        <img src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class = "box five">
    <article class = "post__layout">
      <div class = "image">
        <img src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class = "box one">
    <article class = "post__layout">
      <div class = "image">
        <img src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class = "box two">
    <article class = "post__layout">
      <div class = "image">
        <img src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class = "box six">
    <article class = "post__layout">
      <div class = "image">
        <img src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class = "box three">
    <article class = "post__layout">
      <div class = "image">
        <img src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class = "box two">
    <article class = "post__layout">
      <div class = "image">
        <img src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
</div>

он работает нормально.Если я хочу использовать строку? У вас есть идеи.

— Husna 18.07.2018 12:07

@ Хусна, что ты имеешь в виду под строкой?

— Aravind S 18.07.2018 12:09

@Aravid S, я имею в виду, что div идут в столбцах, таких как col1 ниже col2. Я хочу быть похожим на этот col1 clo2 бок о бок.

— Husna 18.07.2018 12:10

да, это возможно, я думаю ... вы можете сослаться сюда stackoverflow.com/questions/44377343/…

— Aravind S 18.07.2018 12:13
18.07.2018 10:29

Другие вопросы по теме

H1 не скрывается после открытия меню
Веб-просмотр Android с высотой: 100% и фоновым изображением
Как сделать так, чтобы булавки следовали карте?
Переключить начальную загрузку панели навигации слева направо
Возможность одновременного открытия нескольких аккордеонов
Css для эмуляции масштабирования в Chrome
Css - организационная диаграмма - вертикальная линия не подходит для некоторых сценариев
Почему мой селектор CSS недействителен?
Как открыть многоуровневое подменю напротив своего родительского меню?
Настраиваемая полоса прокрутки для поля выбора

Похожие вопросы

H1 не скрывается после открытия меню
HTML: добавление события OnClick игнорируется, если элемент не отображается
Форма не отправляется и выдает сообщение об ошибке
Этот код возвращает неожиданный идентификатор в хром-консоли, но по-прежнему эта функция работает и возвращает ответ. Я ошибся?
JQuery - запрос Ajax POST преобразован в запрос GET
Варианты загрузки из выбранной работы только для первого предмета с классом
Как переопределить функцию js в odoo
Jquery min form-error class скрывает мой элемент управления формой после проверки модели в cakephp
Как сохранить все записи таблицы в базе данных php jquery json
Как разместить datetimepicker на html-странице?