CSS 图片未正确对齐，留下空白

Question

除了显示问题外，我完全不知道该如何解释。我有以下代码：

#photoBox {
    -webkit-column-count: 4;
    -moz-column-count:    4;
    column-count:         4;
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */
    display:table;                      /* Actually FF 20+ */
}
#photoBox img{
    width: 100% !important;
    height: auto !important;
    display: block;
}
#photoBox .photo{
    position: relative;
    float: left;
    box-shadow:       
        0px 0px 0px 2px rgba(0,0,0,0.6),
        0px 0px 0px 14px #fff,
        0px 0px 0px 18px rgba(0,0,0,0.2),
        6px 6px 8px 17px #555;
    margin: 25px;    
}
#photoBox .title {
    position: absolute;
    background-color:rgba(255,255,255,0.7);
    color: #000;
    text-align: center;
    font-weight: bold;
    width: 100% !important;
    bottom: 0;
}

我得到以下结果：

我想要的是"fill in all the spaces"

的图片

像这样：

我能够在第二个屏幕上使用一堆技巧来做到这一点，这些技巧根本不允许我使用我当前的样式来工作。

有人可以指导我我做错了什么 CSS 以获得我想要的结果吗？

谢谢！江淮

Answer 1

使用masonry jquery库来处理问题：

包括砌体

script src="/path/to/masonry.pkgd.min.js"

2.If 你有以下 html:

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item">...</div>
  ...
</div>

3.Then 你的脚本应该是这样的：

$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: 200
});

4.And CSS:

.grid-item { width: 200px; }
.grid-item--width2 { width: 400px; }

CSS 图片未正确对齐，留下空白

CSS images not aligning properly leaving empty spaces

html

css

image

image-gallery