Как я могу предотвратить расширение div? Я хочу, чтобы div с элементами не занимал 100% свободного места и имел ширину, которую у него есть. Мне нужно это для центрирования родительского div горизонтально. Фокус в том, что дочерние элементы должны делиться float: left или diplay: встроенный блок и ширина жидкости, поэтому может быть несколько строк дочерних элементов.
Я не могу обернуть каждую строку в свой собственный div, так как она нарушит отзывчивый дизайн.
Вы должны использовать display: table; Он будет уменьшаться до размера его содержимого, а также может быть центрирован и позиционирован, не назначая заданную ширину.
Вы пытались использовать display: inline-block? DIV займет 100% ширины, потому что они являются блочными элементами.
Если вы действительно хотите, чтобы родительский 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>Вы можете установить свойство 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>