CSS圖像未正確對齊，留下空白區域

我不知道如何解釋此問題，而不是顯示問題。我有以下代碼：CSS圖像未正確對齊，留下空白區域

#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來得到我想要的結果嗎？

謝謝！江淮

來源

2015-10-24 jAC

它，因爲你在使用'浮動：left'，看看這個：HTTP：// cssdeck.com/labs/css-only-pinterest-style-columns-layout – Ferrrmolina

這正是我一直在尋找的！謝謝你@Ferrrmolina！ – jAC

不客氣:) – Ferrrmolina

使用磚石jQuery庫來處理這個問題：

包括磚石

SCRIPT SRC = 「/路徑/到/ 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.Then你的腳本應該是這樣的：

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

4.And的CSS：

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

來源

2015-10-24 03:04:43

CSS圖像未正確對齊，留下空白區域

回答

相關問題