我注意到IE 9及以下版本不支持多列。但是，我发现这个网站即使使用最新的Firefox也没有加载正确 - 任何想法是什么阻止了多列？
Here is a CSSDesk以下内容：
body {
background: url(http://subtlepatterns.com/patterns/scribble_light.png);
}
#wrapper {
width: 90%;
max-width: 1100px;
min-width: 800px;
margin: 50px auto;
}
#columns {
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;
column-count: 3;
column-gap: 15px;
column-fill: auto;
}
.pin {
display: inline-block;
background: #FEFEFE;
border: 2px solid #FAFAFA;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
margin: 0 2px 15px;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
padding: 15px;
padding-bottom: 5px;
background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
opacity: 1;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
.pin img {
width: 100%;
border-bottom: 1px solid #ccc;
padding-bottom: 15px;
margin-bottom: 5px;
}
.pin p {
font: 12px/18px Arial, sans-serif;
color: #333;
margin: 0;
}
@media (min-width: 960px) {
#columns {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
}
@media (min-width: 1100px) {
#columns {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
}
#columns:hover .pin:not(:hover) {
opacity: 0.4;
}<div id="wrapper">
<div id="columns">
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
<p>
Donec a fermentum nisi.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
<p>
Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis nunc convallis quis aliquam mauris suscipit.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
<p>
Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis nunc convallis quis aliquam mauris suscipit.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
<p>
Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis nunc convallis quis aliquam mauris suscipit. Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
<p>
Nullam eget lectus augue.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis. Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis.
</p>
</div>
</div>
</div>
答案 0 :(得分：0)
删除列填充：auto; （供应商也是前缀）
删除：
-webkit-column-fill: auto;
-moz-column-fill: auto;
column-fill: auto;
HTML（相同）
body {
background: url(http://subtlepatterns.com/patterns/scribble_light.png);
}
#wrapper {
width: 90%;
max-width: 1100px;
min-width: 800px;
margin: 50px auto;
}
#columns {
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-moz-column-count: 3;
-moz-column-gap: 10px;
column-count: 3;
column-gap: 15px;
}
.pin {
display: inline-block;
background: #FEFEFE;
border: 2px solid #FAFAFA;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
margin: 0 2px 15px;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
padding: 15px;
padding-bottom: 5px;
background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
opacity: 1;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
.pin img {
width: 100%;
border-bottom: 1px solid #ccc;
padding-bottom: 15px;
margin-bottom: 5px;
}
.pin p {
font: 12px/18px Arial, sans-serif;
color: #333;
margin: 0;
}
@media (min-width: 960px) {
#columns {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
}
@media (min-width: 1100px) {
#columns {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
}
#columns:hover .pin:not(:hover) {
opacity: 0.4;
}<div id="wrapper">
<div id="columns">
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
<p>
Donec a fermentum nisi.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
<p>
Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis nunc convallis quis aliquam mauris suscipit.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
<p>
Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis nunc convallis quis aliquam mauris suscipit.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
<p>
Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis nunc convallis quis aliquam mauris suscipit. Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
<p>
Nullam eget lectus augue.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis. Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis.
</p>
</div>
</div>
</div>