CSS列bug - 5列数只显示4（带图像） [英] CSS columns bug — 5 column count only showing 4 (with images)

问题描述

我想实现Chris Coyier的示例使用CSS列创建一个无缝响应的图像网格。

我把Chris的文件放到我的服务器上，一切看起来很好。我改变的唯一的事情是实际的图像。

现在，你在我的测试页，只有4列图片而不是指定的5列，使用 column-count：5; 。第五列只是没有内容的空格。

这只会在浏览器窗口大于1200像素时发生。当浏览器窗口小于1200像素时，媒体查询将进入并减少列数4,3,2和最后1.换句话说，只有当 column-count：为5岁以上

这发生在FF 10，Chrome 17+和Safari 5 +中。

$ b

 
 < section id =photos> 
 
< img src =images / iso_o.jpgalt =Isometric/> 
 
< img src =images / iso_o.jpgalt =Isometric/> 
 
< img src =images / iso_o.jpgalt =Isometric/> 
 
< img src =images / iso_o.jpgalt =Isometric/> 
 
< img src =images / iso_o.jpgalt =Isometric/> 
 
< img src =images / iso_o.jpgalt =Isometric/> 
 
 ... 
 
< / section> 
  

以下是未修改的CSS：

  * {margin：0; padding：0; } 
 
 #photos {
 / *防止垂直间隙* / 
 line-height：0; 
 
 -webkit-column-count：5; 
 -webkit-column-gap：0px; 
 -moz-column-count：5; 
 -moz-column-gap：0px; 
 column-count：5; 
 column-gap：0px; 
 
} 
 #photos img {
 / *只是在有内联属性的情况下* / 
 width：100％！important; 
 height：auto！important; 
} 
 
 @media（max-width：1200px）{
 #photos {
 -moz-column-count：4; 
 -webkit-column-count：4; 
 column-count：4; 
} 
} 
 @media（max-width：1000px）{
 #photos {
 -moz-column-count：3; 
 -webkit-column-count：3; 
 column-count：3; 
} 
} 
 @media（max-width：800px）{
 #photos {
 -moz-column-count：2; 
 -webkit-column-count：2; 
 column-count：2; 
} 
} 
 @media（max-width：400px）{
 #photos {
 -moz-column-count：1; 
 -webkit-column-count：1; 
 column-count：1; 
} 
} 
  

解决方案

我有一个答案，虽然它是一个解决方法，而不是一个修复。我改变了图像，使一些高度为300px，其他，370px。基本上，我改变了图像的高度，并保持所有的图像的宽度相同，300px。所以答案是不是使用方形图像，或者如果你想使用所有的方形图像，请使用列数：4而不是5.

如果任何人都可以提供进一步了解为什么会发生这种情况。

I am trying to implement Chris Coyier's example of using CSS columns to create a seamless responsive grid of images.

I put Chris's files onto my server and everything looked fine. The only thing I changed was the actual images.

Now, as you see on my test page, there are only 4 columns of images instead of the specified 5, using column-count:5;. The fifth column is just whitespace with no content.

This only happens when the browser window is greater than 1200px. When the browser window is less than 1200px, the media queries kick in and decreases the column count 4, 3, 2, and finally 1. In other words, this bug only happens when the column-count: is 5 and up

This happens in FF 10, Chrome 17+, and Safari 5+.

Any help would be appreciated!

Here is the trimmed HTML:

<section id="photos">

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        ...                     

</section>

Here is the untouched CSS:

* { margin: 0; padding: 0; }

#photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;

}
#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

解决方案

Ok I have an answer, although it is a workaround, not a fix. I changed up the images so that some were 300px in height and others, 370px. Basically I varied the the height of the images and kept the width of all the images the same, 300px. So the answer is to either not use square images, or if you want to use all square images, use column-count:4 instead of 5.

If anyone can provide further insight into why this happens that would be great.

这篇关于CSS列bug - 5列数只显示4（带图像）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！