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

Problem

I have "boxes" that float left so that I can display them in a line until they need to wrap. This works well, but my coloured background doesn't shrink to the minimum, it expands to the maximum.

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

JSFiddle

http://jsfiddle.net/RLRh6/

(Expand and shrink the Result section to see the effect)

(展开和缩小“结果”部分以查看效果)

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

What I Get

Note the extra green colour, right of the boxes:

注意方框右边的额外绿色:

Example 1

Example 2

What I Want

Example 1

Example 2

Question

Is it possible to have the green-background div (".boxes") shrink to the minimum possible size to display the boxes without Javascript? You should be able to shrink and expand the div freely and not see any green to the right of the boxes.

是否可以将绿色背景div(“。boxes”)缩小到可能的最小尺寸以显示没有Javascript的框?您应该能够*缩小和扩展div,而不会在框的右侧看到任何绿色。

4 个解决方案

#1

Working DEMO http://jsfiddle.net/RLRh6/56/

工作演示http://jsfiddle.net/RLRh6/56/

If you want to achieve this only with html, css, should use media queries.

如果你想只用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

your container will wrap if there's a clear 'break to next line'.

如果有一个明确的“下一行中断”,你的容器将会换行。

Here is a pen to see different test, just set via CSS how many per line.

这是一支笔,看到不同的测试,只需通过CSS设置每行多少。

3.2.1 is that what you want ?

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

I have done little bit changes in your css, check the jsFiddle link here if it works for you.

我在你的CSS中做了一点点改动,如果它适合你,请查看jsFiddle链接。

Followings are the css chagnes:

以下是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

Remove the min-width from the .container and add display:inline-block;

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

also if you want to center the .container then wrap the .container with a div and apply text-align:center to it.

如果你想将.container中心,然后用.d包装.container并将text-align:center应用于它。

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

jsFiddle Link