Как расположить объекты в div в строчку?
Здравствуйте, ни чего не помогает, в попробовал, но так и не разобрался.
Вот кусок кода html
<div class = "other"> <div class = "discord"> <img src = "images/discord.png"> <p>Наш дискорд.</p> </div> </div> |
<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; } |
.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; }
Дополнительно:
В комментариях к вот этому вопросу Почему не применяются падинги? я показывала как это сделать. Ведь иконка это не img, а вместо div по логике должна быть ссылка.
Зачем вот это white-space: nowrap; внутри картинки вообще загадка. Как вы себе представляете переносы текста внутри картинки?
Если вы имеете в виду объекты img и p, то попробуйте использовать flexbox, добавив например в discord свойство: display: flex и дальше уже можно плясать от этого
.discord { width: 300px; height: 300px; display: inline; background-color: pink; display: flex } |
.discord { width: 300px; height: 300px; display: inline; background-color: pink; display: flex }
Подробнее можно почитать вот здесь: https://doka.guide/css/flexbox-guide/
- Большое спасибо!
Ответы:
Попробуйте использовать Bootstrap, там уже есть готовые стили для того, что бы решить вашу задачу
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы расположить объекты в div в строчку, можно использовать CSS свойство display со значением inline-block для каждого объекта внутри div. Это позволит элементам вести себя как строчные элементы, но при этом сохранять блочные свойства.
Пример кода на HTML и CSS:
<div class="container"> <div class="item">Object 1</div> <div class="item">Object 2</div> <div class="item">Object 3</div> </div>
.container { width: 100%; } .item { display: inline-block; width: 30%; /* Ширина каждого объекта */ margin: 0 1%; /* Расстояние между объектами */ }
В данном примере у каждого объекта внутри div задан класс item, который имеет свойство display: inline-block. Таким образом, объекты будут расположены в строчку, а не подряд как блочные элементы.
Также следует обратить внимание на ширину каждого объекта (width) и отступы между ними (margin), которые можно настроить по своему усмотрению.
Если требуется более сложное позиционирование объектов внутри div, можно также использовать CSS свойство flexbox или grid, которые обеспечивают более гибкое и удобное управление расположением элементов на странице.