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

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

Я решил похожую проблему (где я не хотел использовать 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>

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

Вы можете использовать display: flex для родительского элемента

#parentElement {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }

Я бы просто установил padding: -whateverYouWantpx;

Personnaly, я просто делаю это:

HTML-код:

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

CSS-код:

div {
    display: inline;
}

Если вы примените float к вашему div, он тоже работает, но, очевидно, вам нужно применить «очистить оба» CSS-правила для следующего HTML-элемента.

Вы можете попробовать этот код. Следуйте коду в разделе 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>

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

width: -moz-fit-content;

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

Что, если мы определим глобальную переменную и используем ее для обоих?

:root {
    --table-width: 400px;
}

.container{
     width:var(--table-width);
     border: 1px solid black;   // easy visualization
}
.inner-table {
     width:var(--table-width);
     border: 1px solid red;   // easy visualization
}

<div class="container">
    <table class="inner-table">
       <tr>
           <td>abc</td>
       </tr>
    </table>
</div>

У меня есть span внутри div, и просто установка margin: auto для контейнера div сработала для меня.

Мне кажется, что это нормально работает во всех браузерах. Примером является фактическое объявление, которое я использую онлайн и в новостной рассылке Просто измените содержимое div. Он будет корректироваться и уменьшаться в зависимости от заданного вами размера отступа.

<div style="float:left; border: 3px ridge red; background: aqua; padding:12px">
    <font color=red size=4>Need to fix a birth certificate? Learn <a href="http://www.example.com">Photoshop in a Day</a>!
    </font>
</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>

<div class="parentDiv" style="display:inline-block">
    // HTML elements
</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.

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

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

width: intrinsic;

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

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

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

display: inline-block;

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

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

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

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

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

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

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

display: table;

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

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

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

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

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

1. display: inline-block;

   ИЛИ

2. display: table;

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

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

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

.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>

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

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

CSS2-совместимое решение состоит в том, чтобы использовать:

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

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

.my-div
{
    float: left;
}

width:1px;
white-space: nowrap;

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

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

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;).

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