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

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

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

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

1754
задан 16 янв. '09 в 19:03
источник поделиться
34 ответов
  • 1
  • 2

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

2099
ответ дан 12 окт. '10 в 19:47
источник

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

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

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

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

313
ответ дан 16 янв. '09 в 19:40
источник

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

display: inline-block;

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


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

HTML:

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

CSS

.yourdiv
{
    display: inline;
}
206
ответ дан 16 янв. '09 в 19:41
источник

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

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

#element {
    display: table; /* IE8+ and all other modern browsers */
}
182
ответ дан 13 мая '12 в 2:39
источник
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;

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

83
ответ дан 25 авг. '10 в 22:36
источник

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

display: table;

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

75
ответ дан 11 янв. '12 в 15:01
источник

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

div {
  width: fit-content; 
  /* To adjust the height as well */ 
  height: fit-content;
}
64
ответ дан 27 мая '13 в 3:41
источник

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

  • display: inline-block;

    ИЛИ

  • display: table;

Из этих двух display:table; лучше.

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

54
ответ дан 10 мая '16 в 23:16
источник

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

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

width: intrinsic;

К сожалению, IE отстает от него, так что он еще не поддерживает его

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

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

display: inline-block;
41
ответ дан 11 дек. '13 в 16:07
источник

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

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

36
ответ дан 16 янв. '09 в 19:08
источник
width:1px;
white-space: nowrap;

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

32
ответ дан 26 авг. '11 в 11:14
источник

Решение, совместимое с CSS2, должно использовать:

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

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

.my-div
{
    float: left;
}
29
ответ дан 16 янв. '09 в 19:13
источник

ОК, во многих случаях вам даже не нужно ничего делать, поскольку по умолчанию 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>
22
ответ дан 17 июня '17 в 8:57
источник

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

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

19
ответ дан 05 окт. '14 в 12:36
источник

Вы можете использовать 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/

18
ответ дан 14 окт. '16 в 19:00
источник
<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 в таблице... и... оно может иметь или не встроенное свойство, и все же таблица - это та, которая будет содержать полную ширину содержимого. =)

17
ответ дан 03 авг. '11 в 19:59
источник

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

.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>
15
ответ дан 23 марта '16 в 12:45
источник

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

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

div {
    display: inline-flex;
}

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

14
ответ дан 08 июня '18 в 3:04
источник

My 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.
13
ответ дан 14 июля '16 в 22:33
источник

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

div { 
    width: fit-content; 
}
13
ответ дан 21 апр. '18 в 19:11
источник

Попробуйте 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>
12
ответ дан 21 июня '17 в 23:48
источник
<div class="parentDiv" style="display:inline-block">
    // HTML elements
</div>

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

12
ответ дан 22 февр. '17 в 14:04
источник

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

width: -moz-fit-content;

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

10
ответ дан 06 июня '12 в 12:54
источник

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

7
ответ дан 25 авг. '12 в 21:54
источник
div{
  width:auto;
  height:auto;
}
6
ответ дан 06 дек. '16 в 22:36
источник

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

display: table;

или,

display: inline-block; 

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

5
ответ дан 30 сент. '16 в 8:00
источник

Если у вас есть контейнеры, ломающие линии, после нескольких часов поиска хорошего решения для 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>
5
ответ дан 04 нояб. '15 в 6:24
источник

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

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


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

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

См. Здесь JSfiddle

5
ответ дан 29 сент. '14 в 9:08
источник

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

4
ответ дан 07 марта '13 в 20:37
источник

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

4
ответ дан 21 окт. '16 в 20:22
источник
  • 1
  • 2

Другие вопросы по меткам или Задайте вопрос