Блок статей
Вид статьи может меняться взависимости от дизайна, но основные блоки должены сохраняться
Вот несколько видов:
<div class="el_articleItem_xxxxxx col"> <div class="wrapperInner"> <div class="row"> <div class="col articleImageBlock"> <div class="imageBlock image-flex"> <a class="el" href="/article/"><img src="article.png" alt=""></a> </div> </div> <div class="col articleInfoBlock"> <p class="title"><a href="/article/" title="Развитие структуры способствует подготовки и реализации">Развитие структуры способствует подготовки и реализации</a></p> <p class="date"><time>22.01.1986</time></p> <div class="description">Таким образом реализация намеченных плановых заданий представляет собой интересный эксперимент проверки форм развития.</div> <p class="readMore"><a href="/article/">Подробнее</a></p> </div> </div> </div> </div>
.el_articleItem_xxxxxx { } .el_articleItem_xxxxxx .wrapperInner { border: 1px solid #2091C9; border-radius: 3px; padding: 15px; height: 100%; } .el_articleItem_xxxxxx .articleImageBlock { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .el_articleItem_xxxxxx .imageBlock { margin-bottom: 15px; padding-bottom: 100%; /* Высота блока с изображением статьи указывается в зависимости от дизайна */ } .el_articleItem_xxxxxx .title { margin-bottom: 15px; height: 45px; overflow: hidden; /*text-align: center;*/ } .el_articleItem_xxxxxx .title a { font-size: 1.4rem; color: #4fad25; } .el_articleItem_xxxxxx .title a:hover { text-decoration: underline; color: #5bcc28; } .el_articleItem_xxxxxx .date { margin-bottom: 10px; font-size: 1.4rem; color: #777777; } .el_articleItem_xxxxxx .description { margin-bottom: 15px; font-size: 1.3rem; color: #777777; } .el_articleItem_xxxxxx .readMore { font-size: 1.4rem; text-align: right; }