如何将此div设置为显示其浮动内容的最小可能宽度？

Question

问题

我有"盒子"向左浮动,以便我可以将它们显示在一条线上,直到它们需要包裹.这很好用,但是我的彩色背景不会缩小到最小,它会扩展到最大值.

的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,而不会在框的右侧看到任何绿色.

Answer 1

工作演示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;
}