2

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

alt text

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

3 ответа 3

4

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

2
  • Gerome, как его использовать? читал, ничего не выходит 13 авг 2013 в 15:46
  • так надо не только читать, а еще и пробовать.
    – Smash
    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 13 авг 2013 в 15:28

Ваш ответ

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

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