CSS. Отображение списка в две колонки. 2.X

 
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 445
Вечер добрый. Подскажите, пожалуйста, немного по css.
Пытаюсь настроить отображение списка записей в две колонки. Основная цель - выравнивание обоих блоков каждой строки по верху. Проблема в том, если в записи есть фото, то оно, каким-то образом, влияет на соседний в строке блок, который фото не имеет. Блок без фото просто спускается вниз, почему-то. Привожу картинку и стили. На картинке, под номером 1, видна сама проблема, под номером 2 и 3, показаны варианты с фото и без у обоих блоков в строке. В них проблем не наблюдается.

Картинка:
Спойлер
Стили для блока:
Код PHP:
  1. .content_list_item {
  2. width: 47%;
  3. display: inline-grid;
  4. }
Пробовал другие подходящие режимы "display": inline-table, inline-table, inline-block..., о результата положительного не добился.

У контейнера для фото стили, по моему мнению, не должны влиять на поведение блока.
Код PHP:
  1. .content_list_item .photo {
  2. float: left;
  3. width: 100%;
  4. }
...но и сними я экспериментировал всяко разно, без толку.

Шаблон дефолтный, все свои стили отключил.
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 2596
вариант а
можно обернуть блоки в дивы с явно указанное высотой и шириной + display:inline-block + overflow:hidden;

тогда ВСЕ блоки выстроятся ровно однако те где нет фото будут иметь пустые пространства внутри себя.


dвариант б

Код PHP:
  1. <style type="text/css">
  2. .masonry { /* Masonry container */
  3. column-count: 2;
  4. column-gap: 1em;
  5. }
  6.  
  7. .item { /* Masonry bricks or child elements */
  8. background-color: #eee;
  9. display: inline-block;
  10. margin: 1px;
  11. width: 100%;
  12. }
  13. </style>
здесь предполагается что каждому блоку вы присвоите class="item"
и все блоки завернёте в родительский div с class="masonry"

блоки с одинаковой шириной будут выстраиваться друг под другом и выстроятся в нужное число колонок свойство column-count: 2;
но блоки будут располагаться сверху внизу и потом слева направо
Редактировалось: 2 раз (Последний: 1 ноября 2017 в 20:59)
Реклама
cms
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 445
Вариант А не подходит, как по причине необходимости лезть в код, так и по наличию пустого пространства внутри блока (как я понял, оно будет на том, месте где было бы фото, при наличии. Если так, то это то же самое, что и сейчас).
А вариант Б я пробовал. Вроде как всё хорошо и красиво, пока не обратил внимание, что записи расположены по датам сверху вниз сначала в первой колонке, а затем во второй. А последние должны быть всегда сверху. Пришлось отказаться.
Посетитель
small user social cms
МедальПочетный донор проектаКубок зрительских симпатийАвторитет форумаПочетный донор проекта
Сообщений: 2792
Yar, не назидания ради:
1. нужно ознакомиться со свойствами назначаемыми браузерами по умолчанию (зачастую, они будут разными)
2. исходя из п.1, поставить реред собой задачу (как бы вам не казалось, что п2. должен быть определён раньше п.1)
3. поискать нужное решение в нете (зачастую помогет даже без каких-то особых знаний)
Возможно, не решит проблему, но к более внятной постановке вопроса на форуме вы точно приблизитесь.
Крайний случай
Украинский для инстант
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 2596
Yar:
Если так, то это то же самое, что и сейчас).
ну если не считать того что блоки перестанут "плясать" и выстроятся ровно, то наверное тоже самое)
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.