artishok

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

Recommended Posts

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

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

divs_500.jpg

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

Edited by artishok

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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


<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>

Share this post


Link to post
Share on other sites

ну каждый столбец это отдельный 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, который я выложил выше, это и делает)

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,511
    Total Members
    3,128
    Most Online
    Marking
    Newest Member
    Marking
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.