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


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

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

Я хотел бы divтолько расширяться до такой степени, tableстановится.


1657


источник


Ответы:


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


2003



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

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

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

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


305



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

display: inline-block;

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


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

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

195



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

Я бы рекомендовал следующее:

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

179



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

Foo Hack - Поддержка Cross Browser для встроенного блочного стиля (2007-11-19) ,


81



What works for me is:

display: table;

in the div. (Tested on Firefox and Google Chrome).


72



You can try fit-content (CSS3):

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

57



There are two better solutions

  1. display: inline-block;

    OR

  2. display: table;

Out of these two display:table; is better.

For display:inline-block; you can use the negative margin method to fix the extra space


52



The answer for your question lays in the future my friend ...

namely "intrinsic" is coming with the latest CSS3 update

width: intrinsic;

unfortunately IE is behind with it so it doesn't support it yet

More about it: CSS Intrinsic & Extrinsic Sizing Module Level 3 and Can I Use?: Intrinsic & Extrinsic Sizing.

For now you have to be satisfied with <span> or <div> set to

display: inline-block;

40



Not knowing in what context this will appear, but I believe the CSS-style property float either left or right will have this effect. On the other hand, it'll have other side effects as well, such as allowing text to float around it.

Please correct me if I'm wrong though, I'm not 100% sure, and currently can't test it myself.


33