23 мая 2016 в 16:43
Всем привет! Помогите пожалуйста разобраться со следующей задачей.
Необходимо создать вот такую страницу: https://yadi.sk/i/-ktAWQuVrvWAk
Проблема заключается в том что блоки должны быть одинаковой высоты, при этом дизайн адаптивный.
При адаптивной дизайне мы не можем использовать таблицу или сетку модуля views, остаются HTML-список и Неформатированный список, но как в них объединить 3 элемента в одну строку не понимаю. Объединять их нужно чтобы задать вертикальные градиенты родительскому элементу этих блоков. Так можно будет сделать их визуально одинаковой высоты, при этом элементы нижней строки по высоте тоже будут на одном уровне.
Если верстать то мы получим такой html код:
Я знаю про настройку Views - Тема оформления: Информация, но как там переопределить так чтобы 3 новости объединялись в общий div представить не могу.
| Вложение | Размер |
|---|---|
 Шаблон | 278.64 КБ |
Комментарии
Почему не выстроить их вряд и не назначить высоту? Зачем объединять по 3? Будут сложности с адаптивностью.
Если так принципиально - в шаблоне пройтись циклом вместо стандартного и подобавлять в блоки по 3 row.
Для шаблона 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?
flexbox вам в помощь
Спасибо, но все же попытаюсь изменить код views так как это будет правильнее... Если не получится буду уже его использовать.
Смог разделить содержимое массива по группам, но теперь проблема как содержимое каждой строки объединить в 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);
}
Подскажите пожалуйста что делать.
"содержимое каждой строки объединить в diV"
https://www.drupal.org/project/views_responsive_grid - МОЖЕТ ПОМОЖЕТ?
К сожалению там нет самого главного - количества элементов которые можно вывести в строку.
Он выводит 3 элемента, а мне нужно 2, там нет настроек чтобы 2 сделать.
Вы не знаете как это можно указать?
After enabling the module, create a new view with the responsive grid display format. Specify the number of columns, and the alignment of the grid.
Переводить?
Вы неправильно меня поняли, нужно создать строки, при этом в каждой строке 2 элемента.
Вот html:
<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>
Если делать так как советую я, код будет такой:
<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>
Почему не устраивает?
Извините за такой вывод кода, это я не специально.
Как выравнять колонки по высоте, div одинаковой высоты с CSS тут внизу http://tlito.ru/node/52
У меня проблемы не с CSS, а с выводом HTML у Drupal, в котором каждый раз убивается куча времени чтобы понять как вывести нужную структуру HTML.
Сейчас та же проблема, есть верстка имеющая следующую структуру:
<div class="first"></div>
<div class="second"></div>
</div>
<div class='row'>
<div class="first"></div>
<div class="second"></div>
</div>
Как в Друпал вывести 2 элемента в 1 строке, вот в чем проблема.
Всем кто пытается помочь большое спасибо, надеюсь что все получится.