DLE — новости в две колонки полностью на css

dle two columns blocks shortstory - DLE - новости в две колонки  полностью на css
DLE — записи в две колонки

Каких-то особенностей, мешающих или наоборот — помогающих создать короткие новости в две колонки нет. Разметка осуществляется лишь средствами базового HTML и CSS.

Текст статьи ниже в 2019 более не актуален т.к. существуют такие технологии, как CSS Flexbox и более совершенное его развитие CSS Grid

Две части кода — одной мы оборачиваем наш shortstory блок с новостью, а второй мы добавляем в файл стилей. Скриншот выше с уже существующего проекта. Позиционирование в две колонки. Далее инструкция:

В шаблон короткой новости templates/{THEME}/shortstory.tpl в контейнер, формирующий короткую новость добавить идентификатор newwws

<div id="newwws">
<h3>[full-link]{title}[/full-link]</h3>
<div id ="cat"><strong>Раздел: </strong>{link-category}  </div>
<div id="over">{short-story}</div>

<p>Просмотров: <b>{views}</b> •  {favorites}    [full-link]<b>Скачать</b>[/full-link]</p>
</div>

В файл стилей: templates/{THEME}/css/style.css.tpl, добавить код:

#newwws{
display:inline-block;
width: 48%; /*Примерное число. На него влияют padding и margin*/
}

#over{ 
height:276px; /*Картинка 150рх + текст, после которой все будет обрезаться  */
overflow: hidden; /*Не показывать текст, который не влез в 276px.*/
}

Если не задать обрезку текста тегом height, то в зависимости от его объема, высотка блока будет меняться, что не есть хорошо и придется для каждого поста подгонять его вручную. А самое забавное — на разных разрешениях экранов все это может перекосить.

Дополнительно по теме

Разработка шаблона на дополнительных полях

Новости от партнеров

Комментарии

  1. @devarts пишет:
    08.10.2013 в 19:36

    Цитата: павел
    Отличное решение! Все работает! Спасибо!

    Спасибо, пользуйтесь на здоровье!

  2. @павел пишет:
    08.10.2013 в 19:24

    Отличное решение! Все работает! Спасибо!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *