当前网站有3列块布局，我正在努力使其响应。随着窗口变得足够小，3列变成了2列，这正是我想要的。然而，它在第三列原来的地方留下了空白，我不想要多余的空白。因此，随着窗口变小，白色空间应该被隐藏(当窗口足够大，可以容纳3列时就会发生这种情况。右侧的白色空间会被隐藏，直到3列变成2列)。
谢谢。：)
JSFiddle
html:
<body>
<div id="content">
<div class="grid3">
<article class="bucket" >
<a href="#">
<img src="images/baskerville1.jpg" alt=""/>
<div class = "img-overlay">
<h3>Monogram</h3></div>
</a>
</article>
<article class="bucket">
<a href="#">
<img src="images/Gastalt.png" alt=""/>
<div class="img-overlay">
<h3>Gastalt Composition</h3>
</div>
</a>
</article>
<article class="bucket">
<a href="#">
<img src="images/redThread.png" alt=""/>
<div class="img-overlay">
<h3>The Red Thread - A Visual Book</h3>
</div>
</a>
</article>
<article class="bucket">
<a href="#">
<img src="images/poster copy.png" alt=""/>
<div class="img-overlay">
<h3>Typographic Hierarchy</h3>
</div>
</a>
</article>
<article class="bucket">
<a href="#">
<img src="images/Spaces.png" alt=""/>
<div class="img-overlay">
<h3>Living in Two Spaces</h3>
</div>
</a>
</article>
css：
@charset "UTF-8";
*{
margin:0;
}
.bucket {
position:relative;
float: left;
margin-left: 3.2%;
margin-bottom:30px;
}
.grid3 .bucket:nth-of-type(3n+1){
margin-left: 0;
clear: left;
}
.grid3 .bucket{
width: 31.2%;
}
.img-overlay h3 {
opacity: 1;
display: inline-block;
margin: auto;
height: 20px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left:0;
color: rgba(255,254,254,1.00);
text-align: center;
vertical-align: middle;
}
应该通过百分比来控制响应布局(3col、2col等)中的确切数字，因为它更容易控制断点发生的时间和位置。以下是展示这一点的JSFiddle：http://jsfiddle.net/sickdesigner/GLnfU/
从本质上讲，整件事的关键是根据你想要的列数将你的.bucket设置为百分比。这使您的文章在三列中装满容器(27.3+3+3=33.3*3=9.9%)。
.bucket{
margin: 2% 3%;
width: 27.3%; }
此外，为了理智起见，我添加了一个通用的盒子尺寸。更多关于盒子尺寸使生活更轻松的信息，请点击此处：http://www.paulirish.com/2012/box-sizing-border-box-ftw/
然而，如果你真的想让你的内容做它想做的事，当它感觉像的时候，你可以完全跳过浮动元素的整个问题。这是这种布局的更嬉皮士式的可爱鸽派版本，虽然它看起来时尚性感，让包括我在内的编码人员垂涎欲滴，但这也意味着让有很多的机会，希望你的内容不会自行崩溃(想想如果图像的比例都不一样会发生什么)。
这是另一个JSFiddle，这次是嬉皮士流口水的方式：http://jsfiddle.net/sickdesigner/zq8YC/1/
附言：嬉皮士流口水的方式也不需要媒体查询，这其实有点酷。
干杯！