Установите ширину div для дочерних элементов встроенного блока (неизвестное количество разделов на строку)

Я хочу, чтобы контейнер div (#a в этом примере) соответствовал width его дочерних элементов, которые inline-block divs.

Число div для каждой строки неизвестно, поскольку оно зависит от размера экрана.

В этом примере я бы хотел, чтобы в контейнере #a не было лишнего серого пространства.

Возможно ли это? (чистый CSS пожалуйста)

#a {
    background-color: gray;
}

.b {
    width: 110px;
    height: 110px;    
    display: inline-block;
    background-color: blue;
}
<div id="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
</div>

ОТВЕТЫ

Ответ 1

Так как, похоже, не существует метода только для CSS, здесь есть быстрый JavaScript для выполнения этой работы.

  • Временно измените родительский стиль display на inline, чтобы он сжимал его содержимое.
  • Установите ширину родительской строчки в соответствии с шириной сокращения до места размещения, используя getBoundingClientRect().
  • Восстановите родительский стиль по умолчанию display, очистив его.

Отрывок

var a = document.getElementById('a');
a.style.display = 'inline';
a.style.width = a.getBoundingClientRect().width + 'px';
a.style.display = '';
#a {
  background-color: gray;
}
.b {
  width: 110px;
  height: 110px;
  display: inline-block;
  background-color: blue;
}
<div id="a">
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
</div>

Ответ 2

Ну, одним из решений является использование media queries:

#a {
    background-color: gray;
    display: block;
    width: 110px;
}

.b {
    width: 110px;
    height: 110px;    
    display: inline-block;
    background-color: blue;
}

@media (min-width: 220px){
    #a {
        width: 220px;
    }
}

@media (min-width: 330px){
    #a {
        width: 330px;
    }
}

@media (min-width: 440px){
    #a {
        width: 440px;
    }
}

@media (min-width: 550px){
    #a {
        width: 550px;
    }
}

@media (min-width: 660px){
    #a {
        width: 660px;
    }
}
<div id="a">
    <div class="b"></div><!--
    --><div class="b"></div><!--
    --><div class="b"></div><!--
    --><div class="b"></div><!--
    --><div class="b"></div><!--
    --><div class="b"></div>
</div>

Ответ 3

Мы можем использовать свойство таблиц или встроенного блока, которые при необходимости изменяют его ширину. Но он не решает проблему полностью, если у вас есть поля в более чем 1 строке

Итак, просто добавьте display:table; в #a

<style>
#a {
    background-color: gray;
    display:table;
}

.b {
    width: 110px;
    height: 110px;    
    display: inline-block;
    background-color: blue;
}
</style>
<div id="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
</div>

Ответ 4

У меня нет большой репутации для комментариев. Так добавил мои предложения здесь. Это поддерживается в Firefox. Для других браузеров нам нужно будет проверить.

#a {
    background-color: gray;
    display: -moz-inline-box;
}


#a:after, #a:before {
    display: table;
    content: "";
}
#a:after{
    clear: both;
}

.b {
    width: 110px;
    height: 110px;    
    float: left;
    background-color: blue;
    border: 2px solid #888;
}
<div id="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
</div>

Ответ 5

Посмотрите, это немного хакерское решение. но может быть, это поможет вам.

.b {
  width: 110px;
  height: 110px;
  display: inline-block;
  background-color: blue;
    border: 8px solid gray;
    float: left;
  
}
<div id="a">
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
</div>

Ответ 6

Взгляните на это:

разделил экран на 10 частей с помощью width: 10vw. это означает 10 процентов ширины обзора.

body, html{
  padding: 0;
  margin: 0;
}

#cont {
  width: 100%;
  text-align: left;
  overflow: hidden;
  background: black;
}

#cont .cell {
  width: 10vw;
  height: 10vw;
  background: red;
  float: left;
  
  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 1);
}
<div id="cont">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
</div>

Ответ 7

Не уверен, что это то, что вы ищете, и я ничего не верю < ie9 поддерживает его, но вы можете использовать модель flexbox.

#a {
    background-color: gray;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.b {
    width: 110px;
    height: 110px;    
    display: inline-block;
    background-color: blue;
    border: 1px solid #fff;
}
<div id="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
</div>

Ответ 8

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

  #a {
    background-color: gray;
    display: flex;
    width:50px;
}

.b {
    min-width: 110px;
    height: 110px;    
    display: inline-block;
    background-color: blue;
}
.c {
    min-width: 110px;
    height: 110px;    
    display: inline-block;
    background-color: red;
}
   <div id="a">
    <div class="b">sample Text</div>
    <div class="c">sample Text</div>
    <div class="b">sample Text</div>
    <div class="c">sample Text</div>
    <div class="b">sample Text</div>
    <div class="c">sample Text</div>
    <div class="b">sample Text</div>
    <div class="c">sample Text</div>
    <div class="b">sample Text</div>
</div>