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

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

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

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

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

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

.my-div
{
    float: left;
}

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

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

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

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

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

display: inline-block;

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

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

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

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

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

Решение - установить div на display: inline-block.

<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 в таблица ... и ... она может иметь или не иметь встроенное свойство, и все же таблица - это та, которая будет содержать общую ширину содержимого. знак равно

width:1px;
white-space: nowrap;

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

Что мне подходит:

display: table;

в div. (Проверено на Fire Fox и Гугл Хром).

Мне кажется, это нормально работает во всех браузерах. Примером является реальное объявление, которое я использую в Интернете и в информационном бюллетене. Просто измените содержимое 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 добавляет дополнительный запас к вашему элементу.

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

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

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

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

width: -moz-fit-content;

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

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

Я попробовал div.classname{display:table-cell;}, и он работал!

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

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

• Поддержка браузера
• Технические характеристики

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

а именно "внутреннее" идет с последним обновлением CSS3

width: intrinsic;

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

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

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

display: inline-block;

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

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


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

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

См. JSfiddle здесь

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

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

Лично я просто делаю это:

HTML код:

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

Код CSS:

div {
    display: inline;
}

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

Если у вас есть контейнеры, разрывающие строки, после нескольких часов поиска хорошего решения 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>

Рабочая демонстрация здесь-

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

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

1. display: inline-block;

   ИЛИ ЖЕ

2. display: table;

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

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

Просто

<div style = "display: inline;">
    <table>
    </table>
</div>

Мое решение CSS3 flexbox в двух вариантах: верхний ведет себя как span, а нижний как div, принимая всю ширину с помощью обертки. Их классы - это «верхний», «нижний» и «нижний обертки» соответственно.

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:

display: table;

или же,

display: inline-block; 

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

Вы можете использовать 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 вообще не поддерживает встроенный блок, но у них есть -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/

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

div{
  width:auto;
  height:auto;
}

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

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

ХОРОШО, во многих случаях вам даже не нужно ничего делать, поскольку по умолчанию div имеет height и width как автоматический, но если это не ваш случай, применение отображения 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: 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>

Просто добавьте стиль в свой файл CSS

div { 
    width: fit-content; 
}

Об этом упоминалось в комментариях, и его трудно найти в одном из ответов, поэтому:

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

div {
    display: inline-flex;
}

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

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

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

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

: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 у меня сработала.

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

Вы можете использовать height: 100% и ширину по своему выбору. Это делает div не больше, чем его содержимое.

Попробуйте использовать свойство width: max-content, чтобы настроить ширину div по размеру его содержимого.

Попробуйте этот пример,

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width:500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {
  width: max-content;
  margin: auto;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<div class = "ex1">This div element has width 500px;</div>
<br>
<div class = "ex2">Width by content size</div>

</body>
</html>