Почему не работает display inline block

Почему display:inline-block не работает для моего HTML?

Техника display: inline-block , позволяющая отображать элементы div рядом друг с другом не работает с моими карточками контента динамически генерируемый.

Мои карточки контента — это модифицированная версия учебника, найденного на веб-сайте w3schools, который можно найти здесь:

Цель

Я создаю относительно простую поисковую систему для своего веб-сайта на основе запроса, который проверяет базу данных MySQL на наличие возможных совпадений. Результаты возвращаются в виде карточки содержимого. Если система найдет 3 совпадения, в результатах будут сгенерированы 3 карточки контента. Код контролируется циклом for (PHP), который генерирует карточку содержимого для каждого найденного совпадения.

Проблема

Соответствующие карточки контента генерируются для каждого совпадения, однако они появляются на отдельных строках друг под другом (по вертикали). Я попытался использовать технику display: inline-block , чтобы заставить их быть рядом друг с другом, но безрезультатно. Я подозреваю, что причина в том, что код для каждой карты контента уже должен быть там, чтобы эффект имел место. В противном случае CSS и HTML предполагают, что была только одна карточка содержимого, и не выравнивают их должным образом.

Код HTML/CSS/PHP для карточек содержимого

Этот вопрос не спрашивает, как уменьшить пустое пространство в верхней части display:inline-block div, это не дубликат. На самом деле у меня есть ответ на этот вопрос, но @temani Afif вы помешали мне ответить.

OP, не могли бы вы реорганизовать свой код без PHP, а что нет, чтобы фрагмент запускался и отображал карты, как вы их описываете?

Причина, по которой display:inline-block не работает, заключается в том, что хотя карты могут быть применены, div.shrink , который их оборачивает, не работает. вы должны либо А) добавить css или класс сжатия непосредственно на карточку и удалить лишнее сокращение div , либо Б) также добавить display:inline-block к div.shrink . Это не имеет никакого отношения к тому факту, что они генерируются динамически, поэтому я собираюсь изменить заголовок этого вопроса.

Дополнительное примечание: margin: auto; создаст промежутки между карточками. Если вы этого не хотите, то вы должны удалить его.

Привет, Эшли. Спасибо, что заметили, что этот пост не является дубликатом. Я безуспешно удалил класс сжатия и margin: auto из класса карт. Карты располагаются рядом друг с другом, если они жестко закодированы. Если они генерируются динамически PHP, код, похоже, не распознает существование второй карты.

@AshleyBrown вот упрощенная проблема OP, когда у нас нет того же контента внутри блока: jsfiddle.net/ec4whajx (если это не так, то OP должен редактировать сгенерированный код, чтобы лучше показать проблему) .. мы всегда можем повторно открыть вопрос, если дубликат неверен

можете поделиться сгенерированным кодом, возможно это не имеет ничего общего с CSS и виноват ваш код PHP

@TemaniAfif Спасибо за пример. В вашем примере сжимающий div не оборачивает все карты, и я предполагаю, что это происходит в коде OP на основе того, что находится внутри их цикла, и если вы обернете его вокруг всех карт в своем примере, вы получите то, что описывает OP. Я бы согласился, чтобы ОП опубликовал сгенерированную разметку (и очистил фрагмент, как было первоначально предложено :-))

Код работает так, как должен в JSFiddle, потому что он не генерируется циклом в PHP, поэтому CSS распознает наличие более одной карточки содержимого и размещает их рядом друг с другом.

где display:inline-block; в приведенном выше примере?

Я добавил background-color: red к классу сокращения и заметил широкое ненужное пустое пространство, которое, по сути, может толкать вторую карту в новый ряд.

^ только с white-space:pre или подобным. Пробелы не сохраняются в HTML, поэтому  

Теперь у меня есть карточки с контентом рядом друг с другом без класса уменьшения. Я никогда не говорил, что PHP-код также создает модальное окно для каждой соответствующей карты контента. Это часть системы бронирования сайта. Я собираюсь сгенерировать их по отдельности и связать вместе, запустив два цикла for в PHP.

Не работает свойство "display: block" на CSS почему?

Вроде бы очень простой код, но почему не работают блоки «Реклама» и «Рекламs» поидее они должны быть в столбик но они почему-то в строчку? Что изменить?

Потому что у них задан float: right;

Ну, дык получается что в правой части экрана должны распологаться блоки друг под другом? Или тогда как это реализовать с помощью CSS ? (Спасибо за ответ)

Не получается. Вы им обоим обтекание задаете.

Оберните их в дополнительный div и ему float задайте.

И не надо никаких display: block, div и так блочный элемент.

Самое простое решение)

Нужно обернуть эти два блока в div и уже его прижать к правой стороне.

maldivec:
Не получается. Вы им обоим обтекание задаете.

Оберните их в дополнительный div и ему float задайте.

Это будет выглядеть так? Если нет то как понять «Оберните их в дополнительный div и ему float задайте» ммм? (спасибо за ответ)!

Не работает display:inline-block

Добрый день друзья. Есть вопрос по поводу верстки, верстаю макет — и в блоке услуг не могу выравнить блоки с видами ремонта в одну линию, задал в hmtl класс, в css — задал отступы и display:inline-block, и ничего не происходит.

Проблема в этом <- Если есть надобность могу скинуть весь архив с проектом

Изменено 7 декабря 2016 пользователем Владимир Горинов

Ссылка на комментарий

Поделиться на других сайтах

6 ответов на этот вопрос

Сортировать по голосам
Сортировать по дате

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.