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>
預先感謝您。
請問您可以發佈一個鏈接到網站? –
此外,我編寫了一個代碼片段的問題,所以如果您可以將圖片上傳到某處並將它們鏈接到這裏,那將會非常棒...嘗試https://archive.org/ –
嗨,我提出了建議的編輯。謝謝。你有任何關於解決方案btw的建議嗎? –