html - 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;
}

我得到以下结果:

我想要得到的是“填满所有空格”的图像

像这样:

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

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

谢谢! 江淮汽车

Answer 1

使用masonry jquery库来处理问题:

1. 包括砌体

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

2.如果你有以下html:

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

3.那么你的脚本应该是这样的:

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

4.CSS:

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