0

Необходимо сверстать контейнер, в котором может быть произвольное количество строк (row), причем должно выполняться следующее:

  1. На больших экранах в каждой строке должно быть 3 столбца.
  2. На маленьких экранах в каждой строке должно быть 2 столбца.
  3. Между смежными строками и смежными столбцами должна быть линия-разделитель.
  4. Нужно учесть, что высота столбцов может быть разной.

Ожидаемый результат: макет верстки.

Как это можно сделать?

2 ответа 2

2

в bootstrap есть готовые классы для задания размеров блока при разном разрешении экрана. строка row по умолчанию "делится на 12 блоков". то есть для того, что бы на больших экранах было 3 столбца, на средних 2 столбца и на маленьких и столбец, для каждого столбца в row нужно описать его поведение.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur non aliquam dolorem ipsam, ut accusantium.</p></div>
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur non aliquam dolorem ipsam, ut accusantium.</p></div>
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur non aliquam dolorem ipsam, ut accusantium.</p></div>
</div>

lg,md,sm,xs - соответственно размеры дисплеев (большой, средний, маленький, очень маленький). А -12 -6 -4 количество столбцов занимаемых блоком. Подробнее про них найдете в гугле. Сделать границы блоку можно банально вложив в него блок с стилями:

<div style="border:1px solid #ccc">content</div>

Для выравнивания высоты блока есть много решений. Если количество текста отличается на "строку-две" можно для всех блоков с контентом задать min-height:400px; (где 400 ваше значение) что бы вмещалось максимально допустимое количество строк. Практически готовый пример:

<html>
    <head>
        <title>Bootstrap</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <style>
            .content-wrapper{
                border:1px solid #ccc;
                min-height: 300px;
            }
            .no-padding{
                padding: 0;
            }
            .row{
                margin:0;
            }
        </style>
    </head>
<body>
<div class="row">
    <div class="no-padding col-lg-4 col-md-6 col-sm-12 col-xs-12">
       <div class="content-wrapper">
            <h3>Header</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur non aliquam dolorem ipsam, ut accusantium.</p>
       </div>
    </div>
    <div class="no-padding col-lg-4 col-md-6 col-sm-12 col-xs-12">
       <div class="content-wrapper">
            <h3>Header</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur non aliquam dolorem ipsam, ut accusantium.</p>
       </div>
    </div>
    <div class="no-padding col-lg-4 col-md-6 col-sm-12 col-xs-12">
       <div class="content-wrapper">
            <h3>Header</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis at aliquam neque nesciunt magnam nostrum temporibus quaerat numquam, magni laborum, asperiores earum dicta ratione ex, assumenda qui eligendi iusto ad perferendis distinctio. Maxime consectetur commodi corporis nemo consequatur! Aliquam vero culpa rem aperiam minus facilis ad. Exercitationem omnis velit necessitatibus rem odit cumque in at, consequatur perspiciatis inventore voluptatibus nostrum maiores? Aperiam qui, minima vel sapiente nam molestiae id distinctio laboriosam unde accusantium quia similique sint dolorum magni! Ullam, optio.</p>
       </div>
    </div>
    <div class="no-padding col-lg-4 col-md-6 col-sm-12 col-xs-12 push-md">
       <div class="content-wrapper">
            <h3>Header</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur non aliquam dolorem ipsam, ut accusantium.</p>
       </div>
    </div>
    <div class="no-padding col-lg-4 col-md-6 col-sm-12 col-xs-12">
       <div class="content-wrapper">
            <h3>Header</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur non aliquam dolorem ipsam, ut accusantium.</p>
       </div>
    </div>
    <div class="no-padding col-lg-4 col-md-6 col-sm-12 col-xs-12">
       <div class="content-wrapper">
            <h3>Header</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis at aliquam neque nesciunt magnam nostrum temporibus quaerat numquam, magni laborum, asperiores earum dicta ratione ex, assumenda qui eligendi iusto ad perferendis distinctio. Maxime consectetur commodi corporis nemo consequatur! Aliquam vero culpa rem aperiam minus facilis ad. Exercitationem omnis velit necessitatibus rem odit cumque in at, consequatur perspiciatis inventore voluptatibus nostrum maiores? Aperiam qui, minima vel sapiente nam molestiae id distinctio laboriosam unde accusantium quia similique sint dolorum magni! Ullam, optio.</p>
       </div>
    </div>
</div>
</body>
</html>

3
  • А что если заранее неизвестно, насколько может отличаться количество текста в блоках?
    – DarkGenius
    Commented 30 дек. 2016 в 9:01
  • @DarkGenius как я описал, способов есть несколько. можно с помощью javascript, можно с помощью display: table-cell, можно с помощью flexible boxes. не бойтесь спрашивать у гугла, там много примеров по вашему вопросу, лучше один раз самому разобраться)
    – nueq
    Commented 30 дек. 2016 в 15:53
  • 1
    @DarkGenius Как пример реализация с display:table-cell; jsfiddle.net/venzell/deynK/1
    – nueq
    Commented 30 дек. 2016 в 15:55
0

Самое простое решение

$(function() {
  $('.blocks').masonry({
    itemSelector: '.block' // обращаемся к пунктам
  });
});
.blocks {
  display: flex;
  flex-wrap: wrap;
  width: 306px;
}
@media all and (min-width: 600px) {
  .blocks {
    width: 204px;
  }
}
.blocks > .block {
  display: block;
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.js"></script>

<div class="blocks">
  <div class="block">Мой любимый текст №1</div>
  <div class="block" style="height: 120px;">Мой любимый текст №2</div>
  <div class="block">Мой любимый текст №3</div>
  <div class="block">Мой любимый текст №4</div>
  <div class="block" style="height: 120px;">Мой любимый текст №5</div>
  <div class="block" style="height: 120px;">Мой любимый текст №6</div>
  <div class="block">Мой любимый текст №7</div>
  <div class="block">Мой любимый текст №8</div>
  <div class="block" style="height: 120px;">Мой любимый текст №9</div>
</div>

2
  • Мне нужно решение без кода js.
    – DarkGenius
    Commented 30 дек. 2016 в 9:00
  • @DarkGenius, без скрипта плотно упаковать не выйдет
    – Yuri
    Commented 30 дек. 2016 в 10:36

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.