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

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

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

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

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

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

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

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

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

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

display: inline-block;

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

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

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

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

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

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

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

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

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

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

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

display: table;

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

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

1. display: inline-block;

   ИЛИ

2. display: table;

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

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

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

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

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

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

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

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

width: intrinsic;

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

Подробнее об этом: модуль внутреннего и внешнего определения размера CSS уровня 3 и могу ли я использовать? Внутренняя и внешняя калибровка .

Пока вы должны быть довольны <span>или <div>настроены на

display: inline-block;

CSS2-совместимое решение заключается в использовании:

.my-div
{
    min-width: 100px;
}

Вы также можете плавать ваш div, что сделает его как можно меньше, но вам нужно будет использовать clearfix, если что-то внутри вашего div плавает:

.my-div
{
    float: left;
}

width:1px;
white-space: nowrap;

у меня отлично работает :)

Хорошо, во многих случаях вам даже не нужно ничего делать, как по умолчанию у div heightи widthкак auto, но если это не ваш случай, применение inline-blockdisplay будет работать для вас ... посмотрите на код, который я создаю для вас, и он сделает что вы ищете:

div {
  display: inline-block;
}

<div>
  <table>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
      <td>Nunc auctor aliquam est ac viverra. Sed enim nisi, feugiat sed accumsan eu, convallis eget felis. Pellentesque consequat eu leo nec pharetra. Aenean interdum enim dapibus diam.</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
    </tr>
  </table>
</div>

Это было упомянуто в комментариях и трудно найти в одном из ответов так:

Если вы используете display: flexпо какой-либо причине, вы можете вместо этого использовать:

div {
    display: inline-flex;
}

Это также широко поддерживается в разных браузерах.

Вы можете сделать это просто с помощью display: inline;(или white-space: nowrap;).

Я надеюсь, что вы найдете это полезным.

Вы можете использовать inline-blockкак @ user473598, но остерегайтесь старых браузеров.

/* Your're working with */
display: inline-block;

/* For IE 7 */
zoom: 1;
*display: inline;

/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;

Mozilla вообще не поддерживает inline-block, но у них -moz-inline-stackпримерно такая же

Некоторые кросс-браузер вокруг inline-blockатрибута отображения: https://css-tricks.com/snippets/css/cross-browser-inline-block/

Вы можете увидеть некоторые тесты с этим атрибутом в: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Просто поместите стиль в свой файл CSS

div { 
    width: fit-content; 
}

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <div id="content_lalala">
                this content inside the div being inside a table, needs no inline properties and the table is the one expanding to the content of this div =)
            </div>
        </td>
    </tr>
</table>

Я знаю, что людям иногда не нравятся таблицы, но я должен сказать вам, что я попробовал встроенные хаки css, и они вроде работали в некоторых div, но в других это не так, так что было действительно легче заключить расширяющийся div в таблица ... и ... она может иметь или не иметь встроенного свойства, и все же таблица - это та, которая будет содержать общую ширину содержимого. знак равно

Рабочая демо здесь

.floating-box {
    display:-moz-inline-stack;
    display: inline-block;

    width: fit-content; 
    height: fit-content;

    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;  
}

<h2>The Way is using inline-block</h2>

Supporting elements are also added in CSS.

<div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
</div>

Мое CSS3-решение flexbox в двух вариантах: одно сверху ведет себя как промежуток, а другое снизу ведет себя как div, занимая всю ширину с помощью оболочки. Их классы "top", "bottom" и "bottomwrapper" соответственно.

body {
    font-family: sans-serif;
}
.top {
    display: -webkit-inline-flex;
    display: inline-flex;
}
.top, .bottom {
    background-color: #3F3;
    border: 2px solid #FA6;
}
/* bottomwrapper will take the rest of the width */
.bottomwrapper {
    display: -webkit-flex;
    display: flex;
}
table {
    border-collapse: collapse;
}
table, th, td {
    width: 280px;
    border: 1px solid #666;
}
th {
    background-color: #282;
    color: #FFF;
}
td {
    color: #444;
}
th, td {
    padding: 0 4px 0 4px;
}

Is this
<div class="top">
	<table>
        <tr>
            <th>OS</th>
            <th>Version</th> 
        </tr>
        <tr>
            <td>OpenBSD</td>
            <td>5.7</td> 
        </tr>
        <tr>
            <td>Windows</td>
            <td>Please upgrade to 10!</td> 
        </tr>
    </table>
</div>
what you are looking for?
<br>
Or may be...
<div class="bottomwrapper">
    <div class="bottom">
    	<table>
            <tr>
                <th>OS</th>
                <th>Version</th> 
            </tr>
            <tr>
                <td>OpenBSD</td>
                <td>5.7</td> 
            </tr>
            <tr>
                <td>Windows</td>
                <td>Please upgrade to 10!</td> 
            </tr>
        </table>
    </div>
</div>
this is what you are looking for.

<div class="parentDiv" style="display:inline-block">
    // HTML elements
</div>

Это сделает ширину родительского div такой же, как наибольшая ширина элемента.

Попробуй display: inline-block;. Для того, чтобы он был кросс-браузерным, пожалуйста, используйте приведенный ниже код CSS.

div {
  display: inline-block;
  display:-moz-inline-stack;
  zoom:1;
  *display:inline;
  border-style: solid;
  border-color: #0000ff;
}

<div>
  <table>
    <tr>
      <td>Column1</td>
      <td>Column2</td>
      <td>Column3</td>
    </tr>
  </table>
</div>

Вмешавшись в Firebug, я нашел значение свойства, -moz-fit-contentкоторое точно соответствует желаемому OP и может быть использовано следующим образом:

width: -moz-fit-content;

Хотя он работает только в Firefox, я не смог найти аналога для других браузеров, таких как Chrome.

Вы можете попробовать этот код. Следуйте коду в разделе CSS.

div {
  display: inline-block;
  padding: 2vw;
  background-color: green;
}

table {
  width: 70vw;
  background-color: white;
}

<div>
    <table border="colapsed">
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>

    </table>
</div>

Я решил аналогичную проблему (в которой я не хотел использовать, display: inline-blockпотому что элемент был отцентрирован), добавив spanтег внутри divтега и переместив форматирование CSS из внешнего divтега в новый внутренний spanтег. Просто добавьте это как еще одну альтернативную идею, если вам display: inline blockне подходит ответ.

Мы можем использовать любой из двух способов для divэлемента:

display: table;

или,

display: inline-block; 

Я предпочитаю использовать display: table;, потому что он обрабатывает все лишние пробелы самостоятельно. Пока display: inline-blockнуждается в некоторой дополнительной фиксации пространства.

div{
  width:auto;
  height:auto;
}

Если у вас есть контейнеры, разбивающие строки, после нескольких часов поисков хорошего решения CSS и не находя ни одного, я теперь вместо этого использую jQuery:

$('button').click(function(){

  $('nav ul').each(function(){
    
    $parent = $(this).parent();
    
    $parent.width( $(this).width() );
    
  });
});

nav {
  display: inline-block;
  text-align: left; /* doesn't do anything, unlike some might guess */
}
ul {
  display: inline;
}

/* needed style */
ul {
  padding: 0;
}
body {
  width: 420px;
}

/* just style */
body {
  background: #ddd;
  margin: 1em auto;
}
button {
  display: block;
}
nav {
  background: #bbb;
  margin: 1rem auto;
  padding: 0.5rem;
}
li {
  display: inline-block;
  width: 40px;
  height: 20px;
  border: solid thin #777;
  margin: 4px;
  background: #999;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>fix</button>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
  </ul>
</nav>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
    <li>1</li>
    <li>5</li>
    <li>9</li>
    <li>2</li>
    <li>6</li>
    <li>5</li>
    <li>3</li>
    <li>5</li>
  </ul>
</nav>

Пересмотрен (работает, если у вас есть несколько детей): вы можете использовать jQuery (посмотрите на ссылку JSFiddle)

var d= $('div');
var w;


d.children().each(function(){
 w = w + $(this).outerWidth();
 d.css('width', w + 'px')
});

Не забудьте включить JQuery ...

Смотрите JSfiddle здесь

Я пытался, div.classname{display:table-cell;}и это сработало!