0

Как сделать чтобы не было пустых мест под блоками как показано на картинке.   сайт

<div class=" row ">
<?php foreach ($data['category'] as $news) { ?>
<div class="col-sm-6 col-md-4">
    <div class="thumbnail">
        <div><img src="<?php echo $news ['photo'] ?>" class="img-responsive" alt="photo">
        </div>

        <div class="caption">
            <h3><?php echo $news ['title'] ?></h3>
            <p><?php echo $news ['id'] ?></p>
            <p><?php echo $news ['short_content'] ?></p>
            <p><a href="News/item/<?php echo $news['id'] ?>" class="btn btn-primary" role="button">Перейти</a> </p>
        </div>
    </div>
</div>
<?php } ?>

1
  • добавите свой код
    – soledar10
    26 апр 2017 в 10:58

3 ответа 3

1

Еще как вариант

.b-columns{
   columns: 3;
   column-gamp: 10px;
}
.b-columns-item{
  -webkit-column-break-inside: avoid; /* Chrome, Safari */
   page-break-inside: avoid;           /* Theoretically FF 20+ */
   break-inside: avoid-column;         /* IE 11 */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row b-columns">
    <div class="b-columns-item">
      <div class="thumbnail">
        <img src="http://placehold.it/250x250" alt="...">
        <div class="caption">
          <h3>Title</h3>
          <p>Как сделать чтобы не было пустых мест под блоками Bootstrap Как сделать чтобы не было пустых мест под блоками Bootstrap</p>
        </div>
      </div>
    </div>
    <div class="b-columns-item">
      <div class="thumbnail">
        <img src="http://placehold.it/250x250" alt="...">
        <div class="caption">
          <h3>Title</h3>
          <p> Как сделать чтобы не было пустых мест под блоками Bootstrap Как сделать чтобы не было пустых мест под блоками Bootstrap</p>
        </div>
      </div>
    </div>
    <div class="b-columns-item">
      <div class="thumbnail">
        <img src="http://placehold.it/250x350" alt="...">
        <div class="caption">
          <h3>Title</h3>
          <p> Как сделать чтобы не было пустых мест под блоками Bootstrap Как сделать чтобы не было пустых мест под блоками Bootstrap</p>
        </div>
      </div>
    </div>
    <div class="b-columns-item">
      <div class="thumbnail">
        <img src="http://placehold.it/250x250" alt="...">
        <div class="caption">
          <h3>Title</h3>
          <p> Как сделать чтобы не было пустых мест под блоками Bootstrap</p>
        </div>
      </div>
    </div>
    <div class="b-columns-item">
      <div class="thumbnail">
        <img src="http://placehold.it/250x150" alt="...">
        <div class="caption">
          <h3>Title</h3>
          <p> Как сделать чтобы не было пустых мест под блоками Bootstrap</p>
        </div>
      </div>
    </div>
    <div class="b-columns-item">
      <div class="thumbnail">
        <img src="http://placehold.it/250x250" alt="...">
        <div class="caption">
          <h3>Title</h3>
          <p> Как сделать чтобы не было пустых мест под блоками Bootstrap</p>
        </div>
      </div>
    </div>
    <div class="b-columns-item">
      <div class="thumbnail">
        <img src="http://placehold.it/250x50" alt="...">
        <div class="caption">
          <h3>Title</h3>
          <p> Как сделать чтобы не было пустых мест под блоками Bootstrap</p>
        </div>
      </div>
    </div>
    <div class="b-columns-item">
      <div class="thumbnail">
        <img src="http://placehold.it/350x250" alt="...">
        <div class="caption">
          <h3>Title</h3>
          <p> Как сделать чтобы не было пустых мест под блоками Bootstrap</p>
        </div>
      </div>
    </div>
    <div class="b-columns-item">
      <div class="thumbnail">
        <img src="http://placehold.it/250x250" alt="...">
        <div class="caption">
          <h3>Title</h3>
          <p>Как сделать чтобы не было пустых мест под блоками Bootstrap Как сделать чтобы не было пустых мест под блоками Bootstrap</p>
        </div>
      </div>
    </div>
    <div class="b-columns-item">
      <div class="thumbnail">
        <img src="http://placehold.it/250x150" alt="...">
        <div class="caption">
          <h3>Title</h3>
          <p>Как сделать чтобы не было пустых мест под блоками Bootstrap Как сделать чтобы не было пустых мест под блоками Bootstrap</p>
        </div>
      </div>
    </div>
  </div>
</div>

3
  • Классно! Возьму на заметку) 25 апр 2017 в 8:00
  • Не получается если по одной новости то показывает нормально а если по три то тоже самое. 25 апр 2017 в 8:54
  • может надо как то при помощи Javascript? или может чтото дуругое? 25 апр 2017 в 8:55
0

Нужно задать им минимальную высоту

В стилях блока: min-height: 200px; (вместо 200 - нужная Вам высота)

0
0

если нет привязки конкретно к bootstrap, можете попробовать flex'ы

.f-row {
  display: flex;
  flex-flow: row nowrap;
}

.f-col {
  border: 2px solid green;
  flex-basis: 33%;
}
<div class="f-row">
  <div class="f-col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, dolores.</div>
  <div class="f-col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fuga quisquam blanditiis fugiat necessitatibus, autem enim quam repudiandae reprehenderit dolores.</div>
  <div class="f-col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quaerat perspiciatis incidunt dolor magnam natus, totam nisi saepe? Obcaecati beatae sapiente laudantium delectus eos unde officia, eligendi recusandae accusamus mollitia.</div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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