问题
我有“盒子”向左浮动,以便我们可以在一行中显示它们,直到它们需要包装.这个效果很好,但是我的彩色背景并没有缩小到最小,它扩展到最大.
的jsfiddle
(展开和缩小结果部分以查看效果)
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,而不是看到右边的任何绿色.
解决方法
工作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;
}
