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

Question

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

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

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

Answer 1

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

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

Answer 2

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

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 3

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

width: -moz-fit-content;

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

Answer 4

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

Answer 5

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

display: table;

или

display: inline-block; 

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

Answer 6

div{
  width:auto;
  height:auto;
}

Answer 7

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

Answer 8

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

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


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

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

См. JSfiddle здесь

Answer 9

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

Answer 10

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

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