Як зробити блоки однакової висоти
Висновок прищепив постів часто роблять в двох або трьох стовпчики вигляді, можна навіть більше, в залежності від бажання. І в такій структурі потрібно брати до уваги однакову висоту блоків хоча б по верхній лінії поста. Щоб зовнішній вигляд мав презентабельне стан для повного стилю дизайну.
Варіантів, як зробити одну висоту блокам незалежно від кількості вмісту тексту, є кілька. Ми розглянемо спосіб з jQuery плагіном jColumn, який легко підключається до сайту, і важить зовсім мало.
Подивитися Demo
Як це працює?
Насамперед потрібно позначити структуру, тобто HTML розмітка. У ній знаходиться основний блок, в якому розташовані прищепив постів, вони як раз і будуть мати однакову висоту. Далі йде блок для мініатюри, слідом йде заголовок, а далі звичайний текст.
<Div class = "row"> <div class = "column col"> <div class = "post-thumbnail"> <a class="responsive-image" title="" href=""> <img src = " img / img1.jpg "title =" "> </a> </ div> <h2 class =" entry-title "> <a href=""> Jemand musste Josef K. verleumdet haben </a> </ h2 > <p> Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!" Sagte er, es war, als sollte die Scham Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!" Sagte er, es war, als sollte die Scham </ p> </ div> <div class = "column col"> <div class = "post-thumbnail"> <a class = "responsive- image "title =" "href =" "> <img src =" img / img2.jpg "title =" "> </a> </ div> <h2 class =" entry-title "> <a href =" "> Jemand musste Josef K. verleumdet haben </a> </ h2> <p> Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!" Sagte er, es war, als sollte die Scham ihn überleben. </ P> </ div> <div class = "column col"> <div class = "post-thumbnail"> <a class="responsive-image" title="" href=""> <img src = " img / img1.jpg "title =" "> </a> </ div> <h2 class =" entry-title "> <a href=""> Jemand musste Josef K. verleumdet haben </a> </ h2 > <p> Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!" Sagte er, es war, als sollte die Scham ich erhob und ihren jungen Körper dehnte. »Es ist ein eigen </ p> </ div> <div class =" column col "> <div class =" post-thumbnail "> <a class="responsive-image" title="" href=""> <img src = "img / img2.jpg" title = ""> </a> </ div> <h2 class = "entry-title"> <a href=""> Jemand musste Josef K. verleumdet haben </ a> </ h2> <p> Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!" Sagte er, es war, als sollte die Scham ihn überleben. Als Gregor </ p> </ div> <div class = "column col"> <div class = "post-thumbnail"> <a class="responsive-image" title="" href=""> <img src = "img / img1.jpg" title = ""> </a> </ div> <h2 class = "entry-title"> <a href=""> Jemand musste Josef K. verleumdet haben </a> < / h2> <p> Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!" Sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!" Sagte er, es war, als sollte die Scham ihn überleben. Als Gregor </ p> </ div> <div class = "column col"> <div class = "post-thumbnail"> <a class="responsive-image" title="" href=""> <img src = "img / img2.jpg" title = ""> </a> </ div> <h2 class = "entry-title"> <a href=""> Jemand musste Josef K. verleumdet haben </a> < / h2> <p> Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!" Sagte er, es war, als sollte die Scham ihn überleben. Als Gregor </ p> </ div> </ div>Другим дією прописуємо стилі оформлення для корекції зовнішнього вигляду. У них немає нічого особливого, хіба що, ширину блоків можете підправити під свій розмір.
.row {float: left; margin: 65px 0 0; } .Col {background-color: #fff; color: # 222; float: left; margin: 5px; padding: 30px; width: 26.333%; / * ширина блоків однієї висоти * / box-shadow: 0 0 0.5em 0.1em rgba (0, 0, 0, 0.05); } A.responsive-image {display: inline-block; margin: 0 auto; width: 100%; } .Col img {height: auto; max-width: 100%; } .Post-thumbnail {height: auto; max-height: 200px; display: block; margin: -2em -2em 0.5em; overflow: hidden; } H2.entry-title {font: 600 23px / 28px arial; padding-bottom: 15px; } .Entry-title a {border-bottom: 1px solid transparent; transition: all 0.5s ease-in 0s; } .Entry-title a: link, .entry-title a: visited {color: inherit; text-decoration: none; } .Entry-title a: active, .entry-title a: hover {border-bottom: 1px solid; }Тепер залишилося підключити скрипт. Викачуємо останню версію плагіна з офіційною сторінки (). Він надається в трьох варіантах для використання: тільки на JavaScript, з бібліотекою jQuery або з бібліотекою Bootstrap. Нам цілком підійде другий варіант.
В кінці сторінки підключаємо бібліотеку jQuery, версію jQuery плагіна і запуск скрипта.
<Script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </ script> <script type = "text / javascript" src = "jcolumn. jquery.min.js "> </ script> <script> $ ( '. col'). jcolumn (); </ Script>