БЛОКИ ОДИНАКОВОЙ ВЫСОТЫ НЕЗАВИСИМО ОТ СОДЕРЖИМОГО.

Главные вкладки

Аватар пользователя maga maga 23 мая 2016 в 16:43

Всем привет! Помогите пожалуйста разобраться со следующей задачей.

Необходимо создать вот такую страницу: https://yadi.sk/i/-ktAWQuVrvWAk

Проблема заключается в том что блоки должны быть одинаковой высоты, при этом дизайн адаптивный.

При адаптивной дизайне мы не можем использовать таблицу или сетку модуля views, остаются HTML-список и Неформатированный список, но как в них объединить 3 элемента в одну строку не понимаю. Объединять их нужно чтобы задать вертикальные градиенты родительскому элементу этих блоков. Так можно будет сделать их визуально одинаковой высоты, при этом элементы нижней строки по высоте тоже будут на одном уровне.

Если верстать то мы получим такой html код:

..Первая новость..
..Вторая новость..
..Третья новость..
..Первая новость..
..Вторая новость..
..Третья новость..
..Первая новость..
..Вторая новость..
..Третья новость..

Я знаю про настройку Views - Тема оформления: Информация, но как там переопределить так чтобы 3 новости объединялись в общий div представить не могу.

ВложениеРазмер
Иконка изображения Шаблон278.64 КБ

Комментарии

Аватар пользователя bumble bumble 23 мая 2016 в 20:53
1

Почему не выстроить их вряд и не назначить высоту? Зачем объединять по 3? Будут сложности с адаптивностью.
Если так принципиально - в шаблоне пройтись циклом вместо стандартного и подобавлять в блоки по 3 row.

Аватар пользователя maga maga 12 июня 2016 в 11:40

Для шаблона views-view-unformatted--doc-views-page--page.tpl.php добавил следующий код:

$new_rows = array_chunk($rows, 2);
foreach($new_rows as $new_row){
print_r($new_row);
}

В каждой строке добавляются по два элемента, но как их объединить в один div. То есть чтобы каждая строка имела свой div?

Аватар пользователя maga maga 12 июня 2016 в 11:41

Спасибо, но все же попытаюсь изменить код views так как это будет правильнее... Если не получится буду уже его использовать.

Аватар пользователя maga maga 12 июня 2016 в 11:36

Смог разделить содержимое массива по группам, но теперь проблема как содержимое каждой строки объединить в div.
Код для views-view-unformatted--doc-views-page--page.tpl.php

$new_rows = array_chunk($rows, 2);
foreach($new_rows as $new_row){
print_r($new_row);
}

Подскажите пожалуйста что делать.

Аватар пользователя maga maga 12 июня 2016 в 14:55

К сожалению там нет самого главного - количества элементов которые можно вывести в строку.
Он выводит 3 элемента, а мне нужно 2, там нет настроек чтобы 2 сделать.
Вы не знаете как это можно указать?

Аватар пользователя maga maga 12 июня 2016 в 15:24

Вы неправильно меня поняли, нужно создать строки, при этом в каждой строке 2 элемента.
Вот html:

        <div class="doc-row">
                                                <div class="doc">
                                                        <div class="doc-body">
                                                                <a class="doc-title" href="/">Решение учредителя о создании и назначении руководителя</a>
                                                                <span class="doc-type">.pdf</span>
                                                                <span class="doc-size">2 Mb</span>
                                                        </div>
                                                </div>
                                                <div class="doc">
                                                        <div class="doc-body">
                                                                <a class="doc-title" href="/">Информация о выполнении государственного задания</a>
                                                                <span class="doc-type">.doc</span>
                                                                <span class="doc-size">5 Mb</span>
                                                        </div>
                                                </div>
                                        </div>
                                        <div class="doc-row">
                                                <div class="doc">
                                                        <div class="doc-body">
                                                                <a class="doc-title" href="/">Информация о материально-техническом обеспечении</a>
                                                                <span class="doc-type">.xls</span>
                                                                <span class="doc-size">10 Mb</span>
                                                        </div>                                                 
                                                </div>
                                                <div class="doc">
                                                        <div class="doc-body">
                                                                <a class="doc-title" href="/">Свидетельство о государственной регистрации</a>
                                                                <span class="doc-type">.pdf</span>
                                                                <span class="doc-size">7 Mb</span>
                                                        </div>                                                 
                                                </div>
                                        </div>
                                        <div class="doc-row">
                                                <div class="doc">
                                                        <div class="doc-body">
                                                                <a class="doc-title" href="/">План финансово-хозяйственной деятельности</a>
                                                                <span class="doc-type">.pdf</span>
                                                                <span class="doc-size">70 Kb</span>
                                                        </div>                                                 
                                                </div>
                                                <div class="doc">
                                                        <div class="doc-body">
                                                                <a class="doc-title" href="/">Планируемые мероприятия</a>
                                                                <span class="doc-type">.pdf</span>
                                                                <span class="doc-size">4 Mb</span>
                                                        </div>                                                 
                                                </div>
                                        </div>
                                </div>
                        </div>
Аватар пользователя VasyOK VasyOK 12 июня 2016 в 16:42

Если делать так как советую я, код будет такой:

<div class="views-row ">
 <div class="views-column">...</div>
 <div class="views-column">...</div>
</div>
<div class="views-row ">
 <div class="views-column">...</div>
 <div class="views-column">...</div>
</div>

Почему не устраивает?

Аватар пользователя maga maga 12 июня 2016 в 15:50

У меня проблемы не с CSS, а с выводом HTML у Drupal, в котором каждый раз убивается куча времени чтобы понять как вывести нужную структуру HTML.
Сейчас та же проблема, есть верстка имеющая следующую структуру:

<div class='row'>
   <div class="first"></div>
   <div class="second"></div>
</div>
<div class='row'>
   <div class="first"></div>
   <div class="second"></div>
</div>

Как в Друпал вывести 2 элемента в 1 строке, вот в чем проблема.
Всем кто пытается помочь большое спасибо, надеюсь что все получится.