我有简单的结构与容器和内盒：
<div id="container">
<div class="block"></div>
// more blocks
<div class="block"></div>
</div>
我想要实现的是将盒子放在这个容器内,但要尽可能地将它们装在一行中.我可以使用JS：http://jsfiddle.net/JhxSd/做同样的事情,但我想避免这种情况,并且只使用CSS.那可能吗？
解决方法
@media查询
使用一组@media查询根据当前屏幕大小为网格定义不同的布局.布局中唯一需要改变的部分是网格包装器的宽度.
出于所有实际目的,这是目前唯一可用的CSS解决方案.有关@media查询为何合适的原因以及其他可用CSS选项无效的原因,请参阅this answer.
上面的演示有@media查询,屏幕大小最大可达1200px(可根据需要添加更多),并且不使用JavaScript. #container的渲染宽度始终为75％(不计算边框),网格在#container中居中.
注意：此解决方案需要在块周围添加包装div.在每个@media查询中,包装器的宽度足以适合适合当前屏幕大小的列数.固定的包装宽度允许网格作为一个整体在#container中居中.如果编辑静态HTML不是一个选项,则可以在使用jQuery加载页面时添加包装器div.
HTML
<div id="container">
<div class="grid-wrapper">
<div class="block"></div>
...
</div>
</div>
CSS
#container {
width: 75%;
...
}
.grid-wrapper {
margin: 0 auto;
width: 70px; /* Default: 1 column */
}
@media (min-width: 200px) {
.grid-wrapper {width: 140px;} /* 2 columns */
}
@media (min-width: 290px) {
.grid-wrapper {width: 210px;} /* 3 columns */
}
...
