css: предотвратить расширение ширины div до доступной ширины

Question

Как я могу предотвратить расширение div? Я хочу, чтобы div с элементами не занимал 100% доступного пространства и имел ширину, как у детей. Мне нужно это для центрирования родительского div по горизонтали. Хитрость заключается в том, что дочерние элементы должны иметь одинаковые значения float:left или diplay: inline-block и width, поэтому дочерних элементов может быть несколько.

Я не могу обернуть каждую строку в свой div, так как это нарушит адаптивный дизайн.

Answer 1

Вы можете установить для свойства width дочерних элементов значение fit-content. Это приведет к тому, что эти элементы будут занимать ровно столько горизонтального пространства, сколько им нужно, и будут доступны в родительском элементе.

Вы также можете установить ширину на max-content но при этом будет игнорироваться ширина родительского элемента, и контент будет расширяться настолько, насколько это необходимо для потомков, и, возможно, переполнять родительский элемент.

Пример:

Настройка проблемы:

.parent {
  width: 15rem;
  height: 5rem;
  border: 1px solid blue;
}

.child {
  border: 1px solid red;
}

<div class="parent">
  <div class="child">
    Content for child
  </div>
</div>

Решение:

.parent {
  width: 15rem;
  height: 5rem;
  border: 1px solid blue;
}

.child {
  width: fit-content;
  border: 1px solid red;
}

<div class="parent">
  <div class="child">
    Content for child
  </div>
</div>

Поддержка для fit-contentдовольно хорошо ( caniuse?). На момент публикации есть хоть какая-то поддержкаfit-content во всех браузерах, кроме IE, Edge и Opera.

Answer 2

Вы должны использовать display: table; Он будет уменьшен до размера его содержимого, а также может быть отцентрирован и позиционирован без необходимости заданной ширины.

ДЕМО http://jsfiddle.net/kevinPHPkevin/9VRzM/

Answer 3

Если вы действительно хотите, чтобы родитель div сворачиваться вокруг своих дочерних элементов (по какой-либо причине, исходя из того, что вы пытаетесь достичь), и затем вы хотите центрировать это div, тогда ответ @Vector точный, используйте display: table с margin: 0 auto,

Если это нормально для div чтобы оставаться развернутым до полной ширины контейнера, в котором вы пытаетесь центрировать своих детей, тогда у вас есть как минимум еще пара вариантов, опять же, в зависимости от вашей конкретной ситуации.

Ты можешь использовать text-align: center,

.content {
  text-align: center;
  border-style: solid;
  border-width: thin;
}

.content span {
  display: inline;
  border-style: solid;
  border-width: thin;
}

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

Вы также можете использовать более новый display: flex с justify-content: center Конечно, в зависимости от уровня совместимости браузера, который вы поддерживаете.

.content {
  display: flex;
  justify-content: center;
  border-style: solid;
  border-width: thin;
}

.content div {
  border-style: solid;
  border-width: thin;
}

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

Answer 4

Если вы измените DOM, добавив дополнительные элементы html внутри div, что приведет к его расширению, простым решением будет добавить этот css в корневой элемент этих дополнительных элементов html:

максимальная ширина: подходящее содержание;

Это не позволит им увеличить ширину родительского элемента div.

Answer 5

Вы пытались использовать display: inline-block? DIV займет 100% ширины, потому что они являются блочными элементами.