Показване на новини в три колони в DLE - портал за игри ABCVG

Показване на новини в три колони в DLE

На снимката крайният резултат след нашата магия преминава:

И така да тръгваме. Добавяне към shortstory.tpl:

Веднага забелязвам, че имаме размер на колоната: 743px, който влияе върху ширината на новините, които нямат фиксирана ширина.

div style = "width: 33%; float: left" - задава относителната ширина на новината спрямо колоната на съдържанието и подравнява новините вляво

div class = "кратка история" - блок с кратки новини

div class = "img-size" - клас за стилизиране на снимки

div class = "clr" - премахваме налагането на картинки върху текста

div id = "catitle" - клас за стилизиране на заглавката

Сега идва забавната част! Добавете стил към style.css:

граница: плътна 1px # 353535; - граница за новини

граница-радиус: 8px; - радиус на граничния ъгъл

марж: 15px 15px 10px 10px; - нови отстъпи, зависи от ширината на колоната

височина: 290px; - височина на блока за новини. необходимо е, ако искаме да използваме дълго заглавие в няколко реда. В противен случай, ако не предписвате височината, блоковете с новини в долните редове няма да се показват точно в колона, а на случаен принцип поради разликата във височината на блоковете.

преливане: скрито; - изрязвайте съдържанието на новините, ако излиза извън определените граници

фон: # 353535; - задайте тъмен фон за новини

кутия-сянка: 2px 2px 2px # 888; - добавете сянка

Задайте фиксирана височина за изображения:

Добавете украса за заглавия на новини:

Важно е да запомните, че пространството под заглавието зависи от разликата във височината на изображенията и височината на блока.

Всичко, Край. Сега имаме добре проектирани новини в три колони, като отчитаме размера на заглавията и снимките.