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

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

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

Ответы

Ответ 1

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

DEMO http://jsfiddle.net/kevinPHPkevin/9VRzM/

Ответ 2

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

Ответ 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>

Ответ 4

Вы можете установить свойство 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>