Чтобы разместить элементы внутри тега `<div>` в одной строке, вы можете использовать различные подходы в CSS. Вот несколько способов:
1. **Flexbox:** Самый современный и гибкий способ.
```html
<div style="display: flex;">
<div>Элемент 1</div>
<div>Элемент 2</div>
<div>Элемент 3</div>
</div>
```
```css
div {
display: flex;
justify-content: space-between; /* для распределения свободного пространства */
align-items: center; /* для вертикального выравнивания */
}
```
2. **Inline-block:** Подход работает для блочных элементов, заставляя их вести себя как inline блоки.
```css
div > div {
display: inline-block;
vertical-align: top; /* или middle для вертикального выравнивания */
}
```
3. **Floats:** Старый подход, чаще всего используется с `clear` для предотвращения коллапса родительского блока.
```css
div > div {
float: left; /* или right */
}
div::after { /* clearfix */
content: "";
display: table;
clear: both;
}
```
4. **Grid:** Для более сложных макетов с сетками.
```css
div {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 равные колонки */
}
```
Чтобы улучшить размещение изображения и текста внутри блока "discord", можно также использовать Flexbox. Вот пример, который может помочь вам начать работу:
HTML:
```html
<div class="discord">
<img src="discord-logo.png" alt="Discord Logo" />
<span>Присоединяйтесь к нашему Discord серверу!</span>
</div>
```
CSS:
```css
.discord {
display: flex;
align-items: center; /* Выравнивание по вертикали */
justify-content: start; /* Выравнивание по горизонтали, начало контейнера */
gap: 10px; /* Расстояние между элементами */
}
.discord img {
width: 50px; /* Можно настроить размер изображения */
height: auto; /* Поддержание пропорций изображения */
}
```
Этот код создаст блок DIV, в котором изображение и текст будут выровнены по центру и располагаться на одной линии. Используйте свойства `align-items`, `justify-content` и `gap` для дополнительной настройки внутреннего расположения элементов.