مرتب کردن ستون ها با اندازه های مختلف با CSS
تو یکی از پروژه ها می خواستم یه گالری درست کنم، که سایز عکس ها یکی نبود، خب برای گالری میدونین وقتی فاصله بین عکس ها یکی نباشه، جالب نمیشه :)
حالا با این روش میتونین ستون هاتون رو فقط با css مرتب کنین و فاصله بین ستون ها هم یکی هستن.
می تونین تعداد ستون ها هم تغییر بدین با column-count. :)
خیلی ساده، راحت و شیک.
// css @media only screen and (min-width: 400px) { .masonry { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } } @media only screen and (min-width: 700px) { .masonry { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; } } @media only screen and (min-width: 900px) { .masonry { -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; } } @media only screen and (min-width: 1100px) { .masonry { -moz-column-count: 5; -webkit-column-count: 5; column-count: 5; } } .masonry { margin: 1.5em 0; padding: 0; -moz-column-gap: 1.5em; -webkit-column-gap: 1.5em; column-gap: 1.5em; font-size: .85em; } .masonry .item { display: inline-block; background: #fff; margin: 0 0 1.5em; width: 100%; } // html <div class="masonry"> <div class="item"><img src="" alt="" /></div> <div class="item"><img src="" alt="" /></div> <div class="item"><img src="" alt="" /></div> ... <div class="item"><img src="" alt="" /></div> </div>
نویسنده : فاطمه حسین پور
ﺳﻪشنبه 13 تير 1396
ﺳﻪشنبه 13 تير 1396