0
A
回答
1
您可以嘗試使用列來實現此目的。
HTML
<section id="photos">
<img src="images/image-1.jpg" alt="Some Image">
<img src="images/image-2.jpg" alt="Another Image">
...
</section>
CSS
#photos {
/* Prevent vertical gaps */
line-height: 0;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-moz-column-count: 3;
-moz-column-gap: 10px;
column-count: 3;
column-gap: 10px;
}
#photos img {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important;
}
而一些媒體查詢CSS
@media (max-width: 800px) {
#photos {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media (max-width: 400px) {
#photos {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
下面是這篇文章的詳細信息Seamless Responsive Photo Grid
0
考慮使用像Bootstrap這樣的框架。它是grid system使響應,基於列的佈局易於創建。
雖然你必須爲equal heights亂了一下。
這裏的基本想法jsFiddle(嘗試調整視口,看看它的表現在較低的分辨率):
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content">a</div>
</div>
<div class="col-md-4">
<div class="content">a</div>
</div>
<div class="col-md-4">
<div class="content">a</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">a</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
<div class="content">a</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="content">a</div>
</div>
<div class="col-md-6">
<div class="content">a</div>
</div>
</div>
</div>
</div>
<div class="row"></div>
</div>
相關問題
- 1. 問題與響應砌體佈局
- 2. 砌體風格響應式佈局
- 3. 響應式砌體jQuery佈局示例
- 4. CSS - 網格/砌體佈局
- 5. 圖像網格流體佈局(響應)
- 6. 使用CSS創建砌體佈局?
- 7. css網格的砌體佈局
- 8. 只有CSS的砌體風格佈局
- 9. 畫布砌體佈局
- 10. 砌體將具體佈局
- 11. 砌體類型背景圖像
- 12. 具有響應式圖像的2列CSS響應式佈局
- 13. 同位素砌體響應式佈局不安排
- 14. 使用MDL砌體佈局
- 15. FacetWP制動砌體佈局
- 16. isotope.js砌體佈局特性
- 17. 流體佈局的CSS背景圖像
- 18. css流體佈局圖像問題
- 19. 如何正確堆砌砌體佈局和延遲加載圖像?
- 20. 兩列響應CSS佈局
- 21. CSS過度響應佈局
- 22. 具有不同尺寸圖像的中心砌體佈局
- 23. jquery砌體中心佈局與圖像不適用於加載
- 24. 在自適應佈局和響應佈局中處理圖像
- 25. 砌體和砌體磚類
- 26. Pure CSS砌體佈局中盒子底部的奇怪間距?
- 27. 我可以製作僅限CSS的砌體佈局嗎?
- 28. 如何僅使用CSS創建砌體佈局?
- 29. 垂直不水平的砌體佈局
- 30. 砌體佈局與高度加載0px
磚混很會照顧,而大的圖像會在可用區域調整.. 。 –