Как сделать div не больше его содержимого?

Question

У меня есть макет, похожий на:

<div>
    <table>
    </table>
</div>

Я бы хотел, чтобы div расширился до такой же ширины, как мой table.

Answer 1

Решение состоит в том, чтобы установить div на display: inline-block.

Answer 2

Вам нужен элемент блока, который имеет то, что CSS называет шириной сжатия, чтобы соответствовать, и спецификация не предоставляет благословенный способ получить такую ​​вещь. В CSS2 сжатие по размеру не является целью, но означает, что нужно иметь дело с ситуацией, когда браузер «должен» получить ширину из воздуха. Эти ситуации:

• float
• абсолютно позиционированный элемент
• элемент встроенного блока
• элемент таблицы

когда ширина не указана. Я слышал, что они думают о добавлении того, что вы хотите в CSS3. А пока обойдемся с одним из вышеперечисленных.

Решение не раскрывать функцию напрямую может показаться странным, но на то есть веская причина. Это дорого. Сжатие по размеру означает форматирование как минимум дважды: вы не можете начать форматирование элемента, пока не узнаете его ширину, и не можете рассчитать ширину без прохождения всего содержимого. Кроме того, элемент не нуждается в усадке так часто, как может показаться. Зачем вам нужен дополнительный div вокруг вашего стола? Может быть, заголовок таблицы - это все, что вам нужно.

Answer 3

Я думаю, используя

display: inline-block;

будет работать, но я не уверен в совместимости браузера.

---

Другим решением было бы заключить ваше div в другое div (если вы хотите сохранить поведение блока):

HTML:

<div>
    <div class="yourdiv">
        content
    </div>
</div>

CSS:

.yourdiv
{
    display: inline;
}

Answer 4

display: inline-block добавляет дополнительный запас вашему элементу.

Я бы порекомендовал это:

#element {
    display: table; /* IE8+ and all other modern browsers */
}

Бонус: Теперь вы также можете легко центрировать этот новый #element, просто добавив margin: 0 auto.

Answer 5

display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;

Foo Hack - кросс-браузерная поддержка стилей встроенных блоков (2007-11-19) .

Answer 6

Что работает для меня это:

display: table;

в div. (Проверено на Firefox и Google Chrome ).

Answer 7

Вы можете попробовать fit-content (CSS3):

div {
  width: fit-content; 
  /* To adjust the height as well */ 
  height: fit-content;
}

• Поддержка браузера
• Спецификация

Answer 8

Есть два лучших решения

1. display: inline-block;

   OR

2. display: table;

Из этих двух display:table; лучше, , поскольку display: inline-block; добавляет дополнительную маржу.

Для display:inline-block; вы можете использовать метод отрицательного поля для исправления дополнительного пробела

Answer 9

Ответ на ваш вопрос лежит в будущем, мой друг ...

а именно «встроенный» идет с последним обновлением CSS3

width: intrinsic;

к сожалению IE отстал, поэтому пока не поддерживает

Подробнее об этом: Модуль внутреннего и внешнего определения размеров CSS Уровень 3 и Можно ли использовать? : внутренний и внешний размеры .

На данный момент вы должны быть удовлетворены с <span> или <div>, установленным на

display: inline-block;

Answer 10

Не зная, в каком контексте это появится, но я верю, что свойство стиля CSS float или left или right будет иметь этот эффект. С другой стороны, у него будут и другие побочные эффекты, такие как разрешение текста плавать вокруг него.

Пожалуйста, поправьте меня, если я ошибаюсь, я не уверен на 100%, и в настоящее время не могу проверить это сам.