Почему тексты вылазит за блок по вертикали?
Игнорируя нижний паддинг, он вылазит по высоте из блока. Вот мой код
HTML
<section class="about"> <div class="container"> <h3 class="about__title title">Почему туристы выбирают нас?</h3> <div class="about__inner"> <picture class="about__image"> <!-- <source srcset="img/about-img-other.jpg" media="(max-width:1740px)"> --> <img src="img/about-img.jpg" alt="Photo" /> </picture> <div class="about__info"> <div class="about__info-block"> <p class="about__block-title">Все уже включено</p> <p class="about__block-text"> Никаких скрытых платежей, все включено: от воды до трансфера и услуг гида </p> </div> <div class="about__info-block about__info-block--two"> <p class="about__block-title">От 4 часов до 2 дней</p> <p class="about__block-text"> Выбирайте подходящую продолжительность экскурсии </p> </div> <div class="about__info-block about__info-block--three"> <p class="about__block-title"> Не требует физической подготовки </p> <p class="about__block-text"> Во время экскурсии не будет сложных восхождений или спусков </p> </div> <div class="about__info-block"> <p class="about__block-title">Местные гиды</p> <p class="about__block-text"> Проведут в потайные места, расскажут о местных традициях и культуре </p> </div> </div> </div> </div> </section> |
<section class="about"> <div class="container"> <h3 class="about__title title">Почему туристы выбирают нас?</h3> <div class="about__inner"> <picture class="about__image"> <!-- <source srcset="img/about-img-other.jpg" media="(max-width:1740px)"> --> <img src="img/about-img.jpg" alt="Photo" /> </picture> <div class="about__info"> <div class="about__info-block"> <p class="about__block-title">Все уже включено</p> <p class="about__block-text"> Никаких скрытых платежей, все включено: от воды до трансфера и услуг гида </p> </div> <div class="about__info-block about__info-block--two"> <p class="about__block-title">От 4 часов до 2 дней</p> <p class="about__block-text"> Выбирайте подходящую продолжительность экскурсии </p> </div> <div class="about__info-block about__info-block--three"> <p class="about__block-title"> Не требует физической подготовки </p> <p class="about__block-text"> Во время экскурсии не будет сложных восхождений или спусков </p> </div> <div class="about__info-block"> <p class="about__block-title">Местные гиды</p> <p class="about__block-text"> Проведут в потайные места, расскажут о местных традициях и культуре </p> </div> </div> </div> </div> </section>
CSS
.about { padding-bottom: 150px; } .about__title { margin-bottom: 80px; } .about__inner { display: flex; gap: 40px; } .about__image { min-width: 49%; } .about__image img { width: 100%; height: 100%; object-fit: cover; } .about__info { display: grid; min-width: 47%; grid-template-columns: 47% 47%; grid-template-rows: repeat(2, minmax(47.6%, 1fr)); gap: 5%; } .about__info-block { max-width: 100%; padding: 30% 6% 2%; border: 2px solid #304b27; } .about__info-block--two, .about__info-block--three { background-image: url(../img/about-block-bg.jpg); color: #fff; } .about__block-title { font-size: 24px; font-weight: 500; margin-bottom: 20px; line-height: 150%; } .about__block-text { max-width: 271px; line-height: 140%; } |
.about { padding-bottom: 150px; } .about__title { margin-bottom: 80px; } .about__inner { display: flex; gap: 40px; } .about__image { min-width: 49%; } .about__image img { width: 100%; height: 100%; object-fit: cover; } .about__info { display: grid; min-width: 47%; grid-template-columns: 47% 47%; grid-template-rows: repeat(2, minmax(47.6%, 1fr)); gap: 5%; } .about__info-block { max-width: 100%; padding: 30% 6% 2%; border: 2px solid #304b27; } .about__info-block--two, .about__info-block--three { background-image: url(../img/about-block-bg.jpg); color: #fff; } .about__block-title { font-size: 24px; font-weight: 500; margin-bottom: 20px; line-height: 150%; } .about__block-text { max-width: 271px; line-height: 140%; }
Дополнительно:
Когда указываете padding в процентах, понимаете, что эти самые проценты будут расчитываться от ширины родительского блока?
И указывая grid-template-rows, сами же ограничиваете их по высоте.
https://codepen.io/xdevelx/pen/NWoMGLp
Для gap, padding, margin забудьте про проценты.
Ответы:
Велкам ту сиэсэс box-sizing
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема "текст вылазит за блок по вертикали" может возникать по нескольким причинам. Вот несколько возможных способов решения этой проблемы:
1. Используйте CSS свойство `overflow: hidden;` для родительского блока, чтобы текст не выходил за его границы.
```html
<div style="overflow: hidden"> <!-- Ваш текст здесь --> </div>
```
2. Проверьте, нет ли лишних отступов или паддингов внутри блока, которые могут привести к тому, что текст вылезет за его пределы. Убедитесь, что ширина блока достаточна для отображения всего текста.
3. Используйте свойство `word-wrap: break-word;` для того, чтобы текст автоматически переносился на новую строку, если он не умещается в блоке.
```html
<div> <!-- Ваш текст здесь --> </div>
```
4. Проверьте, не заданы ли фиксированные размеры шрифта или высоты блока, которые могут привести к тому, что текст вылезет за пределы блока.
5. Если у вас используется многострочный текст, убедитесь, что у вас правильно настроены отступы и выравнивание текста внутри блока.
6. При необходимости, используйте свойство `text-overflow: ellipsis;` для обрезания текста и добавления многоточия в конце блока, если текст не умещается.
```html
<div style="overflow: hidden"> <!-- Ваш текст здесь --> </div>
```
Попробуйте применить вышеперечисленные способы для решения проблемы "текст вылазит за блок по вертикали" и выберите наиболее подходящий для вашего случая.