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

InstantCMS 2.X
#1 1 ноября 2017 в 20:48
Вечер добрый. Подскажите, пожалуйста, немного по css.
Пытаюсь настроить отображение списка записей в две колонки. Основная цель — выравнивание обоих блоков каждой строки по верху. Проблема в том, если в записи есть фото, то оно, каким-то образом, влияет на соседний в строке блок, который фото не имеет. Блок без фото просто спускается вниз, почему-то. Привожу картинку и стили. На картинке, под номером 1, видна сама проблема, под номером 2 и 3, показаны варианты с фото и без у обоих блоков в строке. В них проблем не наблюдается.

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

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

Шаблон дефолтный, все свои стили отключил.
#2 1 ноября 2017 в 20:58
вариант а
можно обернуть блоки в дивы с явно указанное высотой и шириной + display:inline-block + overflow:hidden;

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


dвариант б

  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;
но блоки будут располагаться сверху внизу и потом слева направо
#3 1 ноября 2017 в 21:29
Вариант А не подходит, как по причине необходимости лезть в код, так и по наличию пустого пространства внутри блока (как я понял, оно будет на том, месте где было бы фото, при наличии. Если так, то это то же самое, что и сейчас).
А вариант Б я пробовал. Вроде как всё хорошо и красиво, пока не обратил внимание, что записи расположены по датам сверху вниз сначала в первой колонке, а затем во второй. А последние должны быть всегда сверху. Пришлось отказаться.
#4 1 ноября 2017 в 22:06
Yar, не назидания ради:
1. нужно ознакомиться со свойствами назначаемыми браузерами по умолчанию (зачастую, они будут разными)
2. исходя из п.1, поставить реред собой задачу (как бы вам не казалось, что п2. должен быть определён раньше п.1)
3. поискать нужное решение в нете (зачастую помогет даже без каких-то особых знаний)
Возможно, не решит проблему, но к более внятной постановке вопроса на форуме вы точно приблизитесь.

Стучите в личку. Вдруг совместно придумаем что-то принятное?
#5 1 ноября 2017 в 22:08

Если так, то это то же самое, что и сейчас).

Yar
ну если не считать того что блоки перестанут "плясать" и выстроятся ровно, то наверное тоже самое)
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.