2016-11-22 122 views
1

我試圖用CSS實現下面的佈局。這裏是佈局扣:圖像庫塊與CSS具有不同的圖像尺寸?

https://archive.org/details/Untitled1_20161122

沒有磚石,因爲這是不可能的磚石我猜(行/列寬/高這兩種變化,這是不是在磚石的情況下,我可能是錯的)。有沒有一個不錯的純CSS解決方案。這將非常感激。我一直在尋找一個相當長的CSS解決方案。例如www.bata.com在他們的主頁上有類似的結果,如果這有助於解釋目的,並且就我而言不用石工。

這裏是我的代碼:

.gallery { 
 
\t \t \t \t width: 70%; 
 
\t \t \t \t margin: 0 auto; 
 
\t \t \t \t background: crimson; 
 
\t \t \t \t position: relative; 
 
\t \t \t } 
 
\t \t \t .col-20 { 
 
\t \t \t \t width: 20%; 
 
\t \t \t \t float: left; 
 
\t \t \t \t /*border: 1px solid red;*/ 
 
\t \t \t } 
 
\t \t \t .col-40 { 
 
\t \t \t \t width: 40%; 
 
\t \t \t \t float: left; 
 
\t \t \t \t /*border: 1px solid red;*/ 
 
\t \t \t } 
 
\t \t \t .col-60 { 
 
\t \t \t \t width: 60%; 
 
\t \t \t \t float: left; 
 
\t \t \t \t /*border: 1px solid red;*/ 
 
\t \t \t } 
 
\t \t \t div { 
 
\t \t \t \t overflow: hidden; 
 
\t \t \t } 
 
\t \t \t img { 
 
\t \t \t \t width: 100%; 
 
\t \t \t \t height: auto; 
 
\t \t \t }
<div class="gallery"> 
 
     \t <div class="col-40"> 
 
     \t \t <img src="1.png" alt=""> 
 
     \t </div> 
 
     \t <div class="col-20"> 
 
     \t \t <img src="2.jpg" alt=""> 
 
     \t </div> 
 
     \t <div class="col-20"> 
 
     \t \t <img src="3.jpg" alt=""> 
 
     \t </div> 
 
     \t <div class="col-20"> 
 
     \t \t <img src="4.png" alt=""> 
 
     \t </div> 
 
     \t <div class="col-20"> 
 
     \t \t <img src="2.jpg" alt=""> 
 
     \t </div> 
 
     \t <div class="col-20"> 
 
     \t \t <img src="3.jpg" alt=""> 
 
     \t </div> 
 
     </div>

預先感謝您。

+0

請問您可以發佈一個鏈接到網站? –

+0

此外,我編寫了一個代碼片段的問題,所以如果您可以將圖片上傳到某處並將它們鏈接到這裏,那將會非常棒...嘗試https://archive.org/ –

+0

嗨,我提出了建議的編輯。謝謝。你有任何關於解決方案btw的建議嗎? –

回答

0

如果您對靜態佈局很好,可以使用具有固定佈局和無邊框的表格。

https://css-tricks.com/fixing-tables-long-strings/

設置你的圖片作爲背景的表background-size: cover;

然後用寬度,列跨度和行跨度,創建你的桌子上有固定的佈局。

enter image description here