2

Здравствуйте, есть проблема, есть сайт в длину нужно блоков 5 расположить, но блоки будут разной высоты (в блоках будут картинки), как расположить нижние блоки под верхними? Вот примерно как нужно:

alt text

7
  • я бы посмотрел как сделано в исходнике примера
    – unknown
    Commented 13 авг. 2013 в 14:29
  • полностью поддерживаю. автор, ты смотрел через инспектор кода этот сайт, что на картинке?
    – mountpoint
    Commented 13 авг. 2013 в 14:44
  • расположить нижние блоки под верхними они и так уже там.
    – Smash
    Commented 13 авг. 2013 в 14:49
  • @Gerome, это пример как нужно сдлеать Commented 13 авг. 2013 в 14:55
  • @mountpoint, demo.designwall.com/wallpress вот там это шаблон, там не понятно там каждому элементу top left right высчитывают и прописывают в style, посмотрите может вы что поймёте буду очень благодарен Commented 13 авг. 2013 в 14:56

3 ответа 3

4

Вообще там используется библиотека masonry

2
  • Gerome, как его использовать? читал, ничего не выходит Commented 13 авг. 2013 в 15:46
  • так надо не только читать, а еще и пробовать.
    – Smash
    Commented 13 авг. 2013 в 16:01
3

http://jsfiddle.net/6wHdQ/

.vline {
  float: left;
  width: 200px;
  margin-right: 10px;
  border-radius: 5px;
}
.vline img {
  margin: 0px;
  display: block;
  margin: 5px 0px 0px 0px;
  border-radius: 5px;
}
.vline div {
  text-align: left;
  line-height: 14px;
  font-size: 16px;
  padding: 5px;
  background: #ddd;
  margin-bottom: 10px;
  border-radius: 5px;
  box-shadow: 0px 0px 2px 1px #000;
}
.wrapper {
  width: 1190px;
}
<div class="wrapper">
  <div class="vline">
    <div>Вот все думают, что женщины придумали феминизм, чтоб сесть на шею мужикам.
      <img src="http://lorempixel.com/190/200/sports/1/" alt="" />
    </div>
    <div>Вот все думают, что женщины придумали феминизм, чтоб сесть на шею мужикам.
      <img src="http://lorempixel.com/190/300/sports/2/" alt="" />
    </div>
    <div>Вот все думают, что женщины придумали феминизм, чтоб сесть на шею мужикам.
      <img src="http://lorempixel.com/190/100/sports/3/" alt="" />
    </div>
  </div>



  <div class="vline">
    <div>Вот все думают, что женщины придумали феминизм, чтоб сесть на шею мужикам.
      <img src="http://lorempixel.com/190/100/sports/3/" alt="" />
    </div>
    <div>Вот все думают, что женщины придумали феминизм, чтоб сесть на шею мужикам.
      <img src="http://lorempixel.com/190/200/sports/1/" alt="" />
    </div>
    <div>Вот все думают, что женщины придумали феминизм, чтоб сесть на шею мужикам.
      <img src="http://lorempixel.com/190/300/sports/2/" alt="" />
    </div>
  </div>


  <div class="vline">
    <div>Вот все думают, что женщины придумали феминизм, чтоб сесть на шею мужикам.
      <img src="http://lorempixel.com/190/300/sports/2/" alt="" />
    </div>
    <div>Вот все думают, что женщины придумали феминизм, чтоб сесть на шею мужикам.
      <img src="http://lorempixel.com/190/100/sports/3/" alt="" />
    </div>
    <div>Вот все думают, что женщины придумали феминизм, чтоб сесть на шею мужикам.
      <img src="http://lorempixel.com/190/200/sports/1/" alt="" />
    </div>
  </div>

  <div class="vline">
    <div>Вот все думают, что женщины придумали феминизм, чтоб сесть на шею мужикам.
      <img src="http://lorempixel.com/190/200/sports/1/" alt="" />
    </div>
    <div>Вот все думают, что женщины придумали феминизм, чтоб сесть на шею мужикам.
      <img src="http://lorempixel.com/190/300/sports/2/" alt="" />
    </div>
    <div>Вот все думают, что женщины придумали феминизм, чтоб сесть на шею мужикам.
      <img src="http://lorempixel.com/190/100/sports/3/" alt="" />
    </div>
  </div>



  <div class="vline">
    <div>Вот все думают, что женщины придумали феминизм, чтоб сесть на шею мужикам.
      <img src="http://lorempixel.com/190/100/sports/3/" alt="" />
    </div>
    <div>Вот все думают, что женщины придумали феминизм, чтоб сесть на шею мужикам.
      <img src="http://lorempixel.com/190/200/sports/1/" alt="" />
    </div>
    <div>Вот все думают, что женщины придумали феминизм, чтоб сесть на шею мужикам.
      <img src="http://lorempixel.com/190/300/sports/2/" alt="" />
    </div>
  </div>
</div>

-1

Юзайте inline-block . В отличии от float, inline-block позволяет позиционировать блоки как показано в примере.

1
  • 2
    @Archiolidius такого не получится, если юзать только inline-block Commented 13 авг. 2013 в 15:28

Ваш ответ

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

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