如何将此div设置为显示其浮动内容的最小可能宽度？ [英] How do I set this div to be the minimum possible width to display its floating contents?

问题描述

问题

我有盒子向左浮动，因此我可以在一行中显示它们，直到需要换行。

JSFiddle

这是一个很好的方法，但是我的颜色背景不会缩小到最小。

如果你只想用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 dotted blue; 
 width：70px; 
 height：50px; 
 float：left; 
 margin：2px; 
} 
  

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.

解决方案

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

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

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

这篇关于如何将此div设置为显示其浮动内容的最小可能宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！