Как установить этот div как минимально возможную ширину для отображения плавающего содержимого?

Проблема

У меня есть "ящики", которые плавают влево, чтобы я мог отображать их в строке до тех пор, пока они не будут завернуты. Это хорошо работает, но мой цветной фон не сжимается до минимума, он расширяется до максимума.

JSFiddle

http://jsfiddle.net/RLRh6/

(Разверните и уменьшите область результатов, чтобы увидеть эффект)

HTML

<div class="container">
    <div class="boxes">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>

CSS

.container {
    background: #fcc;
    margin: 0 auto;
    max-width: 300px;
}

.boxes {
    background: #cfc;
    overflow: hidden;
}

.box {
    border: 1px dashed blue;
    width: 70px;
    height: 50px;
    float: left;
    margin: 2px;
}

Что я получаю

Обратите внимание на дополнительный зеленый цвет, справа от полей:

Пример 1

Пример 2

Что я хочу

Пример 1

Пример 2

Вопрос

Возможно ли иметь div с зеленым фоном ( ".boxes" ) уменьшить до минимально возможного размера, чтобы отображать ящики без Javascript? Вы должны иметь возможность сжимать и расширять div свободно и не видеть никаких зеленых справа от полей.

Ответ 1

Рабочая DEMO http://jsfiddle.net/RLRh6/56/

Если вы хотите достичь этого только с помощью html, css, следует использовать медиа-запросы.

CSS

.container {
    margin: 0 auto;
    min-width: 76px;
    max-width: 228px;
}
@media only screen and (min-width: 76px) {
  .boxes {
      float:left;
      background: #cfc;
      width: 76px;
  }
}
@media only screen and (min-width: 152px) {
  .boxes {
      float:left;
      background: #cfc;
      width: 152px;
  }
}
@media only screen and (min-width: 228px) {
  .boxes {
      float:left;
      background: #cfc;
      width: 228px;
  }
}
.boxes {
    float:left;
    background: #cfc;
}

.box {
    border: 1px dashed blue;
    width: 70px;
    height: 50px;
    float: left;
    margin: 2px;
}

Ответ 2

ваш контейнер будет завершен, если появится четкий "разрыв до следующей строки".

Вот ручка, чтобы увидеть другой тест, просто установите через CSS сколько строк.

3.2.1 это то, что вы хотите?

http://codepen.io/gcyrillus/pen/gHwjz

.container {
    background: #fcc;
    margin: 0 auto;
    max-width:300px;
    }
.container.table {
  display:table;
}
.boxes {
    background: #cfc;
    display:inline-block ;/* or float */
    vertical-align:top;
}
.box {
    border: 1px dashed blue ;
    width: 70px;
    height: 50px;
    float:left;
    margin: 2px;
}

/* ====== test */
.container {clear:left;margin:1em auto;}
.container.inline-block {
  display:inline-block;
}
.container.table {
  display:table;
}
.container.float {
 float:right
}
section {
  width:450px; 
  margin:auto;
  padding:0.5em 1.5em;
  background:#ddd;
  overflow:hidden;
}
.container:before { /* see classes */
  content:attr(class);
  display:block;
  position:absolute;
  margin-top:-1.2em;
}

/* wrap to next-line */
.float .box:nth-child(1n) {
clear:left;
}
.inline-block .box:nth-child(4n) {
clear:left;
}
.table .box:nth-child(odd) {
clear:left;
}

Ответ 3

Я сделал небольшие изменения в вашем css, проверьте ссылку jsFiddle здесь, если она работает для вас.

Подпишитесь на css chagnes:

.container {
    background: #fcc;
    margin: 0 auto;
    max-width: 300px;
}

.boxes {
    background: #cfc;
    overflow: hidden;
    padding:2px;
}

.box {
    border: 1px dashed blue;
    width: 70px;
    height: 50px;
    float: left;
    margin: 0 2px 2px 0;
}

Ответ 4

Удалите min-width из .container и добавьте display:inline-block;

также, если вы хотите центрировать .container, затем заверните .container с помощью div и примените к нему text-align:center.

.container {
    background: #fcc;
    margin: 0 auto;
   display:inline-block;
}

jsFiddle Link