Как сделать div под размер контента без float и position?

Быстрый ответ

Это делается косвенно, так как есть методы, позволяющие адаптировать div под размеры его содержимого.

Если установить display: inline-block;, то div будет вести себя как строчный элемент, сохраняя при этом блочные характеристики:

<div style="display: inline-block;">Теперь я как в уютной тесной норке!</div>

Ещё один вариант – использование display: table;. Это даст возможность div вести себя как ячейку таблицы:

<div style="display: table;">Теперь я как в ячейке таблицы!</div>

При использовании флексбокс-контейнера дочерний div автоматически подстроится под содержимое благодаря свойству flex: 0 0 auto:

<div style="display: flex;">
    <div style="flex: 0 0 auto;">Теперь я гибко подгоняюсь. 😎</div>
</div>

Для подстройки ширины div под содержимое подойдёт width: min-content.

Как подогнать ширину под содержимое

Для того чтобы ширина div соответствовала размеру содержимого, можно применить width: fit-content;. В качестве резервного варианта для старых браузеров подойдёт width: min-content;:

div {
    width: fit-content;
    width: min-content; /* Запасной вариант для старых браузеров */
}

Создание отзывчивой высоты

Для того чтобы высота div соответствовала размерам содержимого, стоит использовать height: fit-content;:

div {
    height: fit-content; /* Высота по размеру содержимого */
}

Word-break: ваше секретное оружие против лишних пробелов

Свойство word-break: break-all поможет устранить лишние пробелы, обеспечив динамическую подгонку ширины div:

div {
  word-break: break-all; /* Прощай, ненужное пространство */
}

Альтернативные методы

Рассмотрим некоторые альтернативные подходы, такие как абсолютное позиционирование и обтекание.

Абсолютное позиционирование

Применение position: absolute позволяет div подстраиваться под содержимое, однако нужно быть осторожным, поскольку это нарушает стандартный поток документа:

div {
    position: absolute; /* Я выбираю свои размеры сам */
}

Подробнее об этом расскажет наш спикер на видео

Обтекание и встраивание

Обтекание (свойство float: left/right) также служит для подгонки div под содержимое, однако не забывайте сбрасывать обтекание после использования:

div {
    float: left; /* Это просто и эффективно */
}

Визуализация

Представим упаковку вещей (👕 🩳 🧦) в чемодан (🧳):

Перед применением CSS в чемодане было много свободного пространства: 🧳: [👕, 🩳, 🧦, 🧳🧳🧳]

После того как вы настроили CSS, размер чемодана стал идеальным для ваших вещей: 🧳: [👕, 🩳, 🧦]

Работа со различными свойствами display

Выбор подходящего значения для свойства display позволит решить множество задач. Рассмотрим наиболее часто используемые из них:

Сеточная система

CSS Grid позволяет создавать сложные и адаптивные макеты с ячейками точно необходимого размера:

.container {
    display: grid;
}

.item {
    grid-column: auto / span 2; /* Двухклеточное место для меня */
}

Строчные элементы

Если у div стоит display: inline;, он ведёт себя как обычный текст, однако теряет блочные характеристики:

<div style="display: inline;">Теперь я — простой текст!</div>

Центрирование по центру с Fit-Content

С помощью fit-content можно легко центрировать содержимое в элементе:

div {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

Вы знали, что этот процесс называется центрификацией? Об этом и многое другое узнаете в седьмом источнике.

Полезные материалы

1. Полное руководство по Flexbox на сайте CSS-Tricks
2. Основные концепции Flexbox на сайте MDN
3. Понимание CSS Grid на сайте Smashing Magazine
4. Отношение сторон изображений на сайте CSS-Tricks
5. Свойство display на сайте Codrops
6. Свойство display в CSS на W3Schools
7. Горизонтальное центрирование с использованием значения fit-content в CSS