Почему картинки встали не равномерно?
<section class="block_hair"> <div class="container"> <div class="block_hair-items"> <div class="block_hair-window"> <img class="block_hair-img" src="images/image-hair1.jpeg" alt="" /> <a href="" class="block_hair-link">High Performance</a> <p class="block_hair-text"></p> </div> <div class="block_hair-window"> <img class="block_hair-img" src="images/image-hair2.jpeg" alt="" /> <a href="" class="block_hair-link">Super Clean</a> <p class="block_hair-text"></p> </div> <div class="block_hair-window"> <img class="block_hair-img" src="images/image-hair3.jpeg" alt="" /> <a href="" class="block_hair-link">Made for Eco-Optimists</a> <p class="block_hair-text"></p> </div> </div> </div> </section> |
<section class="block_hair"> <div class="container"> <div class="block_hair-items"> <div class="block_hair-window"> <img class="block_hair-img" src="images/image-hair1.jpeg" alt="" /> <a href="" class="block_hair-link">High Performance</a> <p class="block_hair-text"></p> </div> <div class="block_hair-window"> <img class="block_hair-img" src="images/image-hair2.jpeg" alt="" /> <a href="" class="block_hair-link">Super Clean</a> <p class="block_hair-text"></p> </div> <div class="block_hair-window"> <img class="block_hair-img" src="images/image-hair3.jpeg" alt="" /> <a href="" class="block_hair-link">Made for Eco-Optimists</a> <p class="block_hair-text"></p> </div> </div> </div> </section>
.block_hair { height: 600px; background-color: #fbf6f0; } .block_hair-items { display: flex; justify-content: space-between; } .block_hair-window { margin-top: 30px; text-align: center; } .block_hair-img { width: 340px; height: 260px; } .block_hair-link { white-space: nowrap; text-decoration: none; background-color: #abc0db; } |
.block_hair { height: 600px; background-color: #fbf6f0; } .block_hair-items { display: flex; justify-content: space-between; } .block_hair-window { margin-top: 30px; text-align: center; } .block_hair-img { width: 340px; height: 260px; } .block_hair-link { white-space: nowrap; text-decoration: none; background-color: #abc0db; }
Дополнительно:
.block_hair-items {
...
width: 100%
}
Ответы:
Попробуй
.block_hair-window { display: flex } |
.block_hair-window { display: flex }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема с неравномерным расположением картинок на веб-странице может быть вызвана несколькими факторами. Вот несколько возможных причин и способы их решения:
1. Размеры изображений: Если размеры изображений различаются, то они могут влиять на расположение других элементов на странице. Рекомендуется использовать одинаковые размеры для всех изображений или установить им фиксированные размеры через CSS.
2. CSS свойства: Некорректное использование CSS свойств, таких как float, display, position, может привести к неравномерному расположению элементов на странице. Убедитесь, что правильно применены стили для каждой картинки.
3. Использование таблиц: Если картинки размещены в таблице, то необходимо убедиться, что правильно заданы параметры ячеек и колонок для равномерного распределения изображений.
4. Отступы и поля: Проверьте отступы и поля вокруг изображений. Возможно, они могут влиять на их расположение. Используйте CSS для управления отступами и полями.
Пример использования тега
для отображения кода на PHP: <pre lang="php">
Следуя этим рекомендациям и проверяя вышеуказанные факторы, вы сможете исправить проблему с неравномерным расположением картинок на вашей веб-странице.