CSS圖像庫（溢出問題）

我剛開始使用HTML和CSS爲我的投資組合開發了一個更好的圖像庫，但由於圖像顯示在（看似）固定高度區域，一個垂直滾動時，我添加了很多縮略圖。你可以在這裏看到我的意思：http://www.joliverdesigns.co.uk（你可能需要縮小瀏覽器的寬度來查看滾動效果）。CSS圖像庫（溢出問題）

這裏就是我成立了畫廊的CSS：

#gall { 
    margin: 0 auto; 
    width: 70%; 
    padding: 90px 0 90px 0; 
    overflow: auto; 
} 

.gallery { 
    display: flex; 
    flex-wrap: wrap; 
    align-content: flex-start; 
    justify-content: flex-start; 
    height: 100vh; 
} 

.gallery a { 
    flex-grow: 1; 
    flex-basis: 125px; 
    max-width: 200px; 
    margin: 10px; 
} 

.gallery .gallery-item.filler{ 
    display: none; 
} 
.gallery.equalsize .gallery-item.filler{ 
    display: initial; 
    visibility: hidden; 
} 

.gallery-item img { 
    height: 100%; 
    width: 100%; 
    padding: 30px 30px 30px 30px; 
    display: block; 
}

我使用以下小提琴：https://jsfiddle.net/ev5nzm6o/5/計算器上找到。

我最喜歡的是畫廊縮略圖區域沒有垂直滾動，但我無法讓它增加高度，因此它可以容納所有圖像。我覺得我失去了一些明顯的東西。

個人項目圖庫區域下面還有很多空白區域，其中只有四個縮略圖。是否有可能減少該部分以下的空間量？

任何幫助或建議將不勝感激。請記住，我仍在通過反覆試驗來學習，但我希望能夠做到這一點。：）謝謝。

來源

2017-07-02 J. Oliver Designs

在所有應有的尊重，幫助*只有你*不符合[so]的原則。如果您希望我們提供幫助，您需要***確保您的問題對未來用戶有用***有類似問題。請使用片段工具在問題內部創建[mcve]。如果您在鏈接的網站上解決問題，您的問題將不會對未來的訪問者有用。 –

爲了擺脫overflow的，從.gallery刪除

height: 100vh;

，它會默認爲height:auto。

如果由於各種原因，您希望該部分的高度至少爲100vh，請將height:100vh替換爲min-height: 100vh。

#container99 { margin: 0 0 60px 0;} /* style.css:178 */
#container98 { margin: 40px 0 40px 0;} /* style.css:171 */
#gall { padding: 90px 0 90px 0; } /* style.css:134 */

每個加起來要麼margin-bottom或padding-bottom，共計：

下面的「個人項目」額外的空間是從由那個空間。對這些元素的底部邊距或填充屬性設置較低的值，直到您對結果滿意爲止。

來源

2017-07-02 12:30:11

非常感謝您的回覆，Andrei Gheorghiu！我會嘗試編輯它今晚。我非常感謝你的幫助。我很抱歉不正確地發佈這個問題（這是我第一次在這裏發佈，我相信我第一次在任何地方尋求CSS幫助！）。我會記住將來更好地提出我的問題。（你喜歡我編輯我的原始帖子，以更加友好的方式與其他類似的問題？） –

@J，沒關係。但對於將來的問題，請使用片段工具添加[mcve]。如果你不這樣做，那麼一般的反應可能是負面的（低投票率問題，沒有人花時間研究它）。 –

好的，謝謝你，很高興知道。我不想在這裏刺激任何人，因爲我已經覺得自己有點新鮮。再次感謝您的幫助和時間。 :) –

CSS圖像庫（溢出問題）

回答

相關問題