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

Question

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

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

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

Answer 1

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

Answer 2

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

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

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

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

Answer 3

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

display: inline-block;

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

---

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

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

Answer 4

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

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

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

Answer 5

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

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

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

Answer 6

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

1. display: inline-block;

   ИЛИ ЖЕ

2. display: table;

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

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

Answer 7

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

display: table;

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

Answer 8

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

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

Answer 9

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

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

Answer 10

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

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

width: intrinsic;

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

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

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

display: inline-block;

Answer 11

width:1px;
white-space: nowrap;

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

Answer 12

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

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

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

.my-div
{
    float: left;
}

Answer 13

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

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

div {
    display: inline-flex;
}

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

Answer 14

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

div { 
    width: fit-content; 
}

Answer 15

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

Answer 16

просто установите ширину и высоту по размеру содержимого. это очень просто.

      div {

    width: fit-content;
    height: fit-content;
    padding: 10px;

}

Я добавляю отступ: 10px; . если его не указать, элемент div будет полностью прилипать к таблице и будет выглядеть немного неуклюже. Padding создаст заданное пространство между границей элемента и его содержимым. Но это ваше желание не обязательно.

Answer 17

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

Answer 18

Попробуй использовать 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>

Answer 19

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

Answer 20

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

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

Answer 21

Ты можешь использовать inline-block as @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/

Answer 22

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

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

Answer 23

Мое CSS3-решение для флексбокса в двух вариантах: одно сверху ведет себя как промежуток, а другое снизу ведет себя как 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.

Answer 24

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

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

Answer 25

Пытаться 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>

Answer 26

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

width: -moz-fit-content;

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

Answer 27

         div{
width:fit-content;
}

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

Answer 28

          .outer{
          width:fit-content;   
          display: flex;
          align-items: center;
    }
    .outer .content{
         width: 100%;
    }
        
        
        
        
<div class=outer>
    <div class=content>
       Add your content here


    </div>
        
</div>

Answer 29

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

Answer 30

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

display: table;

или же,

display: inline-block; 

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