Как расположить объекты в div в строчку?

Question

[11zeroxxx11]

Здравствуйте, ни чего не помогает, в попробовал, но так и не разобрался.

Вот кусок кода html

<div class = "other">
            <div class = "discord">
                <img src = "images/discord.png">
                <p>Наш дискорд.</p>
            </div>
</div>

CSS

.other {
    font-family: 'font';
    width: 300px;
    height: 1000px;
    padding: 90px 150px;
    position: absolute;
}

.discord {
    width: 300px;
    height: 300px;
    display: inline;
}

.discord img {
    width: 100px;
    height: 100px;
    display: inline-block;
    white-space: nowrap;
}

.discord p {
    font-size: 21.9px;
    color: #fff;
    white-space: nowrap;
    width: 100px;
}

Comments

[Ankhena]

В комментариях к вот этому вопросу Почему не применяются падинги? я показывала как это сделать. Ведь иконка это не img, а вместо div по логике должна быть ссылка.

Зачем вот это white-space: nowrap; внутри картинки вообще загадка. Как вы себе представляете переносы текста внутри картинки?

Answer 1

[otdameskapizm]

Если вы имеете в виду объекты img и p, то попробуйте использовать flexbox, добавив например в discord свойство: display: flex и дальше уже можно плясать от этого

.discord {
    width: 300px;
    height: 300px;
    display: inline;
    background-color: pink;
    display: flex
}

Подробнее можно почитать вот здесь: https://doka.guide/css/flexbox-guide/

Comments

[11zeroxxx11]

Большое спасибо!

Answer 2

[Nik Faraday]

Попробуйте использовать Bootstrap, там уже есть готовые стили для того, что бы решить вашу задачу