[英]How to Keep divs in CSS Gallery in Line, or All The Same Size or Both?
我正在使用 w3schools 下面的代碼來制作一個畫廊。 我遇到的問題是，如果一個項目的描述很長，它會導致下面的項目變得混亂並且無法正確排列。
據我所知，這可以通過使項目框的高度相同或在每行之間設置間隙來解決，從頂行最高的底部到底行所有三個的頂部。 我不知道如何做到這些。
div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; }
<!DOCTYPE html> <html> <head> </head> <body> <div style="overflow: hidden;"> <div class="gallery"> <a target="_blank" href="https://www.w3schools.com/css/img_5terre.jpg"> <img src="https://www.w3schools.com/css/img_5terre.jpg" alt="Cinque Terre" width="600" height="400"> </a> <div class="desc">Add a description of the image here and make it really long to see what happens</div> </div> <div class="gallery"> <a target="_blank" href="https://www.w3schools.com/css/img_forest.jpg"> <img src="https://www.w3schools.com/css/img_forest.jpg" alt="Forest" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="gallery"> <a target="_blank" href="https://www.w3schools.com/css/img_lights.jpg"> <img src="https://www.w3schools.com/css/img_lights.jpg" alt="Northern Lights" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="gallery"> <a target="_blank" href="https://www.w3schools.com/css/img_mountains.jpg"> <img src="https://www.w3schools.com/css/img_mountains.jpg" alt="Mountains" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> </div> </body> </html>
有沒有人有辦法讓它們整齊地保持內聯？
display:flex提供了一種非常簡潔的方式來組織這樣的項目。 您可以將所有內容拉伸到與該行中最高的項目相同的高度，或者您可以通過多種不同的方式將它們對齊，只需幾行代碼到父容器。 欲了解更多信息： https : //css-tricks.com/snippets/css/a-guide-to-flexbox/
.gallery-container { display: flex; align-items: stretch; flex-wrap: wrap; } div.gallery { margin: 5px; border: 1px solid #ccc; /*float: left;*/ width: 180px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; }
<!DOCTYPE html> <html> <head> </head> <body> <div class="gallery-container"> <div class="gallery"> <a target="_blank" href="https://www.w3schools.com/css/img_5terre.jpg"> <img src="https://www.w3schools.com/css/img_5terre.jpg" alt="Cinque Terre" width="600" height="400"> </a> <div class="desc">Add a description of the image here and make it really long to see what happens</div> </div> <div class="gallery"> <a target="_blank" href="https://www.w3schools.com/css/img_forest.jpg"> <img src="https://www.w3schools.com/css/img_forest.jpg" alt="Forest" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="gallery"> <a target="_blank" href="https://www.w3schools.com/css/img_lights.jpg"> <img src="https://www.w3schools.com/css/img_lights.jpg" alt="Northern Lights" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="gallery"> <a target="_blank" href="https://www.w3schools.com/css/img_mountains.jpg"> <img src="https://www.w3schools.com/css/img_mountains.jpg" alt="Mountains" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> </div> </body> </html>
上面的答案效果很好，我想再添加一件事。 如果你想垂直對齊描述，你可以再次使用 Flexbox。 我已將其添加到此處的 CSS 代碼中。
.gallery-container { display: flex; align-items: stretch; flex-wrap: wrap; } div.gallery { margin: 5px; border: 1px solid #ccc; width: 180px; /* To align the description both horizontally and vertically*/ display: flex; flex-direction: column; justify-content: center; align-items:center; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; }
<!DOCTYPE html> <html> <head> </head> <body> <div class="gallery-container"> <div class="gallery"> <a target="_blank" href="https://www.w3schools.com/css/img_5terre.jpg"> <img src="https://www.w3schools.com/css/img_5terre.jpg" alt="Cinque Terre" width="600" height="400"> </a> <div class="desc">Add a description of the image here and make it really long to see what happens</div> </div> <div class="gallery"> <a target="_blank" href="https://www.w3schools.com/css/img_forest.jpg"> <img src="https://www.w3schools.com/css/img_forest.jpg" alt="Forest" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="gallery"> <a target="_blank" href="https://www.w3schools.com/css/img_lights.jpg"> <img src="https://www.w3schools.com/css/img_lights.jpg" alt="Northern Lights" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="gallery"> <a target="_blank" href="https://www.w3schools.com/css/img_mountains.jpg"> <img src="https://www.w3schools.com/css/img_mountains.jpg" alt="Mountains" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> </div> </body> </html>
CSS網格圖像庫：如何將所有圖像調整為相同大小並保持相同距離？
[英]CSS GRID IMAGE GALLERY: How to resize all images to be the same size and maintain the same distance?
如何將CSS背景圖像保存在所有div（痕跡導航箭頭）之上？
[英]How to Keep CSS Background Image on top of all divs(breadcrumb arrows)?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.