Здравствуйте, есть проблема, есть сайт в длину нужно блоков 5 расположить, но блоки будут разной высоты (в блоках будут картинки), как расположить нижние блоки под верхними? Вот примерно как нужно:
3 ответа
.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>
Юзайте inline-block . В отличии от float, inline-block позволяет позиционировать блоки как показано в примере.
-
2@Archiolidius такого не получится, если юзать только inline-block Commented 13 авг. 2013 в 15:28
расположить нижние блоки под верхними
они и так уже там.