Компановка div-ов разной высоты

artishok · October 25, 2011

Можно ли как-то разместить дивы чтобы они выглядели как на картинке? У всех одинаковая ширина и разная высота, и одинаковое(или +- 1 див) количество дивов в столбце

Каждый цвет это отедльный блок

Я нашел плагин для jquery http://masonry.desandro.com/ который делает что мне надо, но хотелост бы для начала обойтись без JS

Edited October 25, 2011 by artishok

dostel1 · October 25, 2011

ну каждый столбец это отдельный div{float:left} в котором у вас будут цветные div з разнЫми цветами и высотами

Cubka · October 25, 2011

Можно флоатами, можно для каждого отдельного дива прописать свои стили. Что-то похожее на:


<head>
<style type="text/css">
body div { width:50px; position:absolute;}
#a {background: #fff; left:0; top:0; height:100px;}
#b {background: #000; left:0; top:100px; height:50px;}
#c {background: #ccc; left:0; top:150px; height:75px;}
#d {background: #abcabc; left:0; top:225px; height:35px;}
#e {background: #ccc000; left:50px; top:0px; height:60px;}
#f {background: #cc00ff; left:50px; top:60px; height:120px;}
#g {background: #fff000; left:50px; top:180px; height:80px;}
</style>
</head>
<body style="position:relative; background: #aaaccc; padding:0; margin:0;">
<div id="a"> </div>
<div id="b"> </div>
<div id="c"> </div>
<div id="d"> </div>
<div id="e"> </div>
<div id="f"> </div>
<div id="g"> </div>
</body>

artishok · October 25, 2011

ну каждый столбец это отдельный div{float:left} в котором у вас будут цветные div з разнЫми цветами и высотами

Это первое что мне пришло в голову) А есть способы без создания столбцов?

Можно флоатами, можно для каждого отдельного дива прописать свои стили. Что-то похожее на:


<head>
<style type="text/css">
body div { width:50px; position:absolute;}
#a {background: #fff; left:0; top:0; height:100px;}
#b {background: #000; left:0; top:100px; height:50px;}
#c {background: #ccc; left:0; top:150px; height:75px;}
#d {background: #abcabc; left:0; top:225px; height:35px;}
#e {background: #ccc000; left:50px; top:0px; height:60px;}
#f {background: #cc00ff; left:50px; top:60px; height:120px;}
#g {background: #fff000; left:50px; top:180px; height:80px;}
</style>
</head>
<body style="position:relative; background: #aaaccc; padding:0; margin:0;">
<div id="a"> </div>
<div id="b"> </div>
<div id="c"> </div>
<div id="d"> </div>
<div id="e"> </div>
<div id="f"> </div>
<div id="g"> </div>
</body>

Плагин для jQuery, который я выложил выше, это и делает)

Searcher · October 25, 2011

Это первое что мне пришло в голову) А есть способы без создания столбцов?

А зачем?

artishok · October 25, 2011

Ну блоки будут генерироваться автоматически, как их раскидывать по столбцам?

Cubka · October 25, 2011

Плагин для jQuery, который я выложил выше, это и делает)

Так ты хотел чтобы это делал не JS. Вот тебе и решение.

Seemann · October 25, 2011

Когда-то сталкивался с такой задачей, решил только использованием http://masonry.desandro.com/

artishok · October 26, 2011

Когда-то сталкивался с такой задачей, решил только использованием http://masonry.desandro.com/

Тоже решил использовать его

lzy · August 10, 2017

Здравствуйте! В данный момент разрабатываю страницу, но никак не могу решить проблему с li, они разной высоты и показываются криво, хотел бы, чтобы показывало ровно по блокам https://upwork.uz/kategorii-uslug-servisa-upwork-uz/. Подскажите пожалуйста как это сделать?

Sign In

Компановка div-ов разной высоты

Question

artishok

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

dostel1

Link to comment

Share on other sites

Cubka

Link to comment

Share on other sites

artishok

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

artishok

Link to comment

Share on other sites

Cubka

Link to comment

Share on other sites

Seemann

Link to comment

Share on other sites

artishok

Link to comment

Share on other sites

lzy

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information