Почему когда я увеличиваю width не увеличивается?
Вот так показывает мне
картинка
html
<div class="page-news__item"> <div class="page-news__img"> <a href="#"> <img src="./assets/images/page-news/placeholder.jpg" alt="Изображение новости" /> </a> </div> <div class="page-news__category"> <a href="#"> Строительство </a> </div> <div class="page-news__title"> <a href="#"> <h3> Экологичные материалы для ремонта: как сделать дом более устойчивым к окружающей среде </h3> </a> </div> <div class="page-news__descr"> <a href="#"> <p> Узнайте о разнообразных экологичных материалах, которые помогут вам сделать </p> </a> </div> <div class="page-news__bottom"> <div class="page-news__date">19.05.2023</div> <div class="page-news__reaction"> <div class="page-news__eye"> <img src="./assets/images/icons/visibility.svg" alt="Изображение новости" /> <span>1225</span> </div> <div class="page-news__like"> <img src="./assets/images/icons/thumb_up.svg" alt="иконка нравится" /> <span>25</span> </div> <div class="page-news__comment"> <a href="#"> <img src="./assets/images/icons/mode_comment.svg" alt="иконка комментариев" /> <span>12</span> </a> </div> </div> </div> </div> |
<div class="page-news__item"> <div class="page-news__img"> <a href="#"> <img src="./assets/images/page-news/placeholder.jpg" alt="Изображение новости" /> </a> </div> <div class="page-news__category"> <a href="#"> Строительство </a> </div> <div class="page-news__title"> <a href="#"> <h3> Экологичные материалы для ремонта: как сделать дом более устойчивым к окружающей среде </h3> </a> </div> <div class="page-news__descr"> <a href="#"> <p> Узнайте о разнообразных экологичных материалах, которые помогут вам сделать </p> </a> </div> <div class="page-news__bottom"> <div class="page-news__date">19.05.2023</div> <div class="page-news__reaction"> <div class="page-news__eye"> <img src="./assets/images/icons/visibility.svg" alt="Изображение новости" /> <span>1225</span> </div> <div class="page-news__like"> <img src="./assets/images/icons/thumb_up.svg" alt="иконка нравится" /> <span>25</span> </div> <div class="page-news__comment"> <a href="#"> <img src="./assets/images/icons/mode_comment.svg" alt="иконка комментариев" /> <span>12</span> </a> </div> </div> </div> </div>
сss
.page-news__list { overflow-x: auto; padding-bottom: 35px; display: flex; justify-content: space-between; align-items: stretch; } .page-news__item { padding: 0; margin: 0; width: 190px !important; border-radius: 5px; border: 1px solid #f6f6f6; margin-left: 10px; padding-bottom: 20px; } |
.page-news__list { overflow-x: auto; padding-bottom: 35px; display: flex; justify-content: space-between; align-items: stretch; } .page-news__item { padding: 0; margin: 0; width: 190px !important; border-radius: 5px; border: 1px solid #f6f6f6; margin-left: 10px; padding-bottom: 20px; }
Хочу чтобы item увеличил свою ширину но не идёт поче му то :(
Дополнительно:
Скорее всего - потому, что менять ширину элемента flex-контейнера нужно в первую очередь через flex-basis
- .page-news__item {
flex-basis: 190px
}
добавить получаеться?
Но не робит :(flex-shrink: 0 надо было ))) спс бро))
Ваши item являются флекс элементами и имеют свойство flex-shrink, которое по умолчанию ровно 1. Чтобы они забирали все требуемое ими пространство поставьте flex-shrink: 0
- Спасибо бро, ты лучший! :)
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, с которой вы столкнулись, связана с тем, что изменение ширины элемента может быть ограничено другими свойствами CSS, такими как `max-width`, `min-width`, `display`, `position` и другими.
Чтобы увеличить ширину элемента, вам необходимо убедиться, что никакие другие CSS-правила не переопределяют ваше значение `width`. Проверьте, нет ли других стилей, которые могут ограничивать ширину элемента.
Если у вас есть какие-то ограничения, вы можете попробовать убрать их или изменить на более подходящие для вашего дизайна.
Вот пример использования CSS для увеличения ширины элемента:
.element { width: 100%; }
Если это не помогло, возможно, проблема связана с другими факторами, такими как содержимое элемента или родительские элементы. Убедитесь, что у родительского элемента нет фиксированной ширины или ограничений на размер.
Также учтите, что некоторые элементы могут автоматически расширяться в зависимости от их содержимого. В этом случае вам может потребоваться добавить дополнительные стили или свойства, чтобы контролировать ширину элемента.
Надеюсь, это поможет вам решить проблему с увеличением ширины элемента. Если у вас остались дополнительные вопросы или проблемы, не стесняйтесь задавать. Буду рад помочь!