Как сделать чтобы фотографии были также слитно?
<section class="photo"> <div class="photo__section"> <div class="photo__text-title"> <h2 class="photo__title">Наше портфолио</h2> <p class="photo__text">Недавние проекты</p> </div> <div class="photo__colage"> <img class="photo__photo" src="Images/house1.jpg" alt="" /> <img class="photo__photo" src="Images/house2.jpg" alt="" /> <img class="photo__photo" src="Images/house3.jpg" alt="" /> <img class="photo__photo" src="Images/house4.jpg" alt="" /> <img class="photo__photo" src="Images/house5.jpg" alt="" /> <img class="photo__photo" src="Images/house6.jpg" alt="" /> <img class="photo__photo" src="Images/house7.jpg" alt="" /> <img class="photo__photo" src="Images/house8.jpg" alt="" /> </div> </div> </section> |
<section class="photo"> <div class="photo__section"> <div class="photo__text-title"> <h2 class="photo__title">Наше портфолио</h2> <p class="photo__text">Недавние проекты</p> </div> <div class="photo__colage"> <img class="photo__photo" src="Images/house1.jpg" alt="" /> <img class="photo__photo" src="Images/house2.jpg" alt="" /> <img class="photo__photo" src="Images/house3.jpg" alt="" /> <img class="photo__photo" src="Images/house4.jpg" alt="" /> <img class="photo__photo" src="Images/house5.jpg" alt="" /> <img class="photo__photo" src="Images/house6.jpg" alt="" /> <img class="photo__photo" src="Images/house7.jpg" alt="" /> <img class="photo__photo" src="Images/house8.jpg" alt="" /> </div> </div> </section>
.photo__section { height: 857px; display: flex; display: inline-block; justify-content: space-between; align-items: center; } .photo__photo { width: 477px; height: 357px; position: relative; flex-direction: column; justify-content: space-between; background-size: cover; margin-left: 0; /*vertical-align: right; /*justify-content: space-between; flex-direction: column;*/ } |
.photo__section { height: 857px; display: flex; display: inline-block; justify-content: space-between; align-items: center; } .photo__photo { width: 477px; height: 357px; position: relative; flex-direction: column; justify-content: space-between; background-size: cover; margin-left: 0; /*vertical-align: right; /*justify-content: space-between; flex-direction: column;*/ }
Дополнительно:
Ответы:
Практически весь код нужно выкинуть..
/*.photo__section {*/ .photo__colage { /*height: 857px;*/ /*display: flex;*/ /*display: inline-block;*/ /*justify-content: space-between;*/ /*align-items: center;*/ display: grid; grid-template-columns: repeat(4, 1fr); } .photo__photo { /*width: 477px;*/ /*height: 357px;*/ /*position: relative;*/ /*flex-direction: column;*/ /*justify-content: space-between;*/ background-size: cover; /*margin-left: 0;*/ /*vertical-align: right; /*justify-content: space-between; flex-direction: column;*/ } |
/*.photo__section {*/ .photo__colage { /*height: 857px;*/ /*display: flex;*/ /*display: inline-block;*/ /*justify-content: space-between;*/ /*align-items: center;*/ display: grid; grid-template-columns: repeat(4, 1fr); } .photo__photo { /*width: 477px;*/ /*height: 357px;*/ /*position: relative;*/ /*flex-direction: column;*/ /*justify-content: space-between;*/ background-size: cover; /*margin-left: 0;*/ /*vertical-align: right; /*justify-content: space-between; flex-direction: column;*/ }
.photo__section { height: 857px; display: flex; // здесь вы перетираете display flex на inline-block, из-за этого flex-свойства работать не будут display: inline-block; justify-content: space-between; align-items: center; } .photo__colage { // это стили для обёртки, а не для элементов display: flex; flex-wrap: wrap; } .photo__photo { width: 477px; // это же для одного фото? Если для обёртки, то надо перенести в . photo__colage height: 357px; position: relative; background-size: cover; margin-left: 0; // не знаю, зачем вам здесь эти стили, но без display: flex они не сработают flex-direction: column; justify-content: space-between; } |
.photo__section { height: 857px; display: flex; // здесь вы перетираете display flex на inline-block, из-за этого flex-свойства работать не будут display: inline-block; justify-content: space-between; align-items: center; } .photo__colage { // это стили для обёртки, а не для элементов display: flex; flex-wrap: wrap; } .photo__photo { width: 477px; // это же для одного фото? Если для обёртки, то надо перенести в . photo__colage height: 357px; position: relative; background-size: cover; margin-left: 0; // не знаю, зачем вам здесь эти стили, но без display: flex они не сработают flex-direction: column; justify-content: space-between; }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сделать фотографии на вашем веб-сайте отображались слитно, вам потребуется использовать стили CSS для управления расположением и отображением изображений. Вот пример того, как можно сделать это с помощью CSS:
1. Создайте контейнер для ваших фотографий, например, div с классом "photo-container":
<div class="photo-container"> <img src="photo1.jpg" alt="Photo 1"> <img src="photo2.jpg" alt="Photo 2"> </div>
2. Примените следующие стили к вашему контейнеру, чтобы сделать фотографии отображались слитно:
.photo-container { display: flex; flex-wrap: nowrap; } .photo-container img { flex: 0 0 auto; margin-right: 10px; /* добавьте отступ между изображениями, если необходимо */ }
3. Обратите внимание на следующие свойства CSS:
- display: flex; - это свойство CSS, которое позволяет создать контейнер с гибкими элементами внутри (в данном случае, фотографиями).
- flex-wrap: nowrap; - это свойство указывает, что элементы не будут переноситься на следующую строку, а будут отображаться в одной линии.
- flex: 0 0 auto; - это свойство указывает, что элементы (фотографии) не будут увеличиваться или уменьшаться по размеру.
- margin-right: 10px; - это свойство добавляет отступ между изображениями, чтобы они не слипались друг с другом.
Примените эти стили к вашему контейнеру с фотографиями, и вы увидите, что они будут отображаться слитно, без переноса на новую строку. Не забудьте также подстроить размеры фотографий и контейнера под ваши потребности.