it-swarm.com.ru

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

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

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

9
vlad

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

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

8
Kevin Lynch

Если вы действительно хотите, чтобы родительский 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>
0
Ryan H.

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

0
mitch