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

Question

问题

我有向左浮动的“盒子”，以便我可以将它们显示在一行中，直到它们需要换行。这很好用，但我的彩色背景不会缩小到最小，它会扩展到最大。

JSFiddle

http://jsfiddle.net/RLRh6/

（将Result部分放大缩小看看效果）

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;
}

Answer 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;
}

Answer 3

min-width从中删除.container并添加display:inline-block;

另外，如果您想居中，.container则.container用 a包裹div并应用于text-align:center它。

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

jsFiddle 链接

Answer 4

我对您的 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;
}