Як я можу зробити div не більше його вмісту?

У мене макет схожий на:

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

Я хотів би, щоб це divрозширилося лише настільки широке, наскільки воно tableстає моїм .

Рішення полягає в тому, щоб встановити divTo display: inline-block.

Ви хочете, щоб блок-елемент мав те, що CSS називає шириною, що відповідає розміру, і специфікація не дає благословенного способу отримати таке. У CSS2 зменшення розміру - це не мета, а означає вирішити ситуацію, коли браузер "повинен" отримати ширину з повітря. Такі ситуації:

• плавати
• абсолютно розміщений елемент
• вбудований блок-елемент
• елемент таблиці

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

Рішення не виставляти функцію безпосередньо може здатися дивним, але є вагома причина. Це дорого. Стискання до придатності означає форматування принаймні двічі: ви не можете почати форматування елемента, поки не дізнаєтесь його ширину, і ви не зможете обчислити ширину, не проходячи весь вміст. Плюс до цього, не потрібен стискаючий елемент так часто, як може здатися. Навіщо потрібен зайвий дів навколо столу? Можливо, підписи таблиці - це все, що вам потрібно.

Я думаю, використовуючи

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, що змусить його якнайменше, але вам потрібно буде використовувати виправлення, якщо все, що знаходиться всередині вашого div, плаває:

.my-div
{
    float: left;
}

width:1px;
white-space: nowrap;

добре працює для мене :)

Гаразд, у багатьох випадках вам навіть не потрібно нічого робити, як за замовчуванням дів має, 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: 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 взагалі не підтримує вбудований блок, але вони мають -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 inline hacks, і вони начебто працювали над деякими дивами, але в інших ні, так що, це було просто простіше вкласти розширювальний 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 у двох смаках: той, що зверху поводиться як проміжок, а той, що знаходиться внизу, поводиться як діва, приймаючи всю ширину за допомогою обгортки. Їх класи - відповідно "верх", "знизу" та "низ".

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>

Це зробить батьківську ширину поділки такою ж, як і найбільша ширина елемента.

Спробуйте 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яке саме робить те, що хотіла ОП, і може бути використане так:

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;}і це спрацювало!