Как установить три изображения по горизонтали в php

#html #css

Вопрос:

Я пытаюсь установить три изображения по горизонтали, но изображения всегда выходят вертикально, я взял ссылку из Интернета, но все еще не могу решить эту проблему, может кто-нибудь, пожалуйста, помогите мне, как установить ее по горизонтали

 .categories{
    margin: 70px 0;
}
.col-3{
    flex-basis: 30%;
    min-width: 250px;
    margin-bottom: 30px;
}
.col-3 img{
    width: 100%;
}
.small-container{
    max-width: 1080px;
    margin: auto;
    padding-left: 25px;
    padding-right: 25px;
}

  <div class="categories">
        <div class="small-container">
            <div class="row">
                <div class="col-3">
                    <img src="assets/offer.jpg">
                <div class="col-3">
                <img src="assets/offer2.jpg">
                <div class="col-3">
                <img src="assets/offer3.jpg">
            </div>   
        </div>

1. Добро пожаловать в Stackoverflow. Чистый и правильный код очень поможет вам. Пожалуйста, ОБНОВИТЕ свой код … в вашем коде ЕСТЬ МНОГО <div> «s», которые НЕ закрыты 😉 И ЧЕМ вы можете взглянуть на ответ ВИО … Для настройки сетки flexbox необходим гибкий контейнер … просто перейдите по ссылкам, чтобы увидеть, как это работает.

2. извините, я обновил свой код, я поставил гибкий, теперь он работает нормально, СПАСИБО

Ответ №1:

если вы не используете Bootstrap, попробуйте этот код

 .categories{
    margin: 70px 0;
}
.col-3{
    flex-basis: 30%;
    min-width: 250px;
    margin-bottom: 30px;
}
.col-3 img{
    width: 100%;
}
.small-container{
    max-width: 1080px;
    margin: auto;
    padding-left: 25px;
    padding-right: 25px;
}
.row{
    flex-direction: row!important;
    display:flex;
}

 <div class="categories">
        <div class="small-container">
            <div class="row">
                <div class="col-3">
                    <img src="assets/offer.jpg">
                    </div>
                <div class="col-3">
                <img src="assets/offer2.jpg">
                </div>
                <div class="col-3">
                <img src="assets/offer3.jpg">
                </div>
            </div>   
        </div>
        </div>

Я перечисляю некоторые изменения в вашем коде

Закройте Все Подразделения <div></div>
добавьте класс строк следующим образом

 .row{
    flex-direction: row!important;
    display:flex;
}

если вы используете bootstrap

Закройте Все Подразделения <div></div>
добавьте класс в свой HTML d-flex flex-row следующим образом

 <div class="categories">
        <div class="small-container">
            <div class="d-flex flex-row">
                <div class="col-3">
                    <img src="assets/offer.jpg">
                    </div>
                <div class="col-3">
                <img src="assets/offer2.jpg">
                </div>
                <div class="col-3">
                <img src="assets/offer3.jpg">
                </div>
            </div>   
        </div>
        </div>

Ответ №2:

Проблема: я вижу, вы использовали свойство flex-basis. Это свойство принадлежит Flexbox и работает только с элементами Flex.

Решение:
Вам нужно сделать .row гибкий контейнер вот так:

 .row {
   display: flex; 
}

Кстати, у ваших 2-го и 3-го col-3 нет конечного тега. Пожалуйста, закройте их, используя конечный тег.

Некоторые ресурсы для изучения Flexbox:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://flexboxfroggy.com