發現很難實現照片網格佈局

我很難實現這個確切的照片網格有關如何去做的任何想法？ enter image description here 發現很難實現照片網格佈局

澄清，我已經有工作原型enter image description here這與Flexbox的做，但一個wasnt fiting井，所以我不得不使用的犯規對其他屏幕大小顯示在正常工作的絕對位置。

繼承人是我的代碼

.container-ed { 
 
    padding: 0px 40px; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    flex-wrap: wrap; 
 
    margin-top: 30px; 
 
} 
 

 
.pic-ed { 
 
    position: relative; 
 
} 
 

 
.pic-ar { 
 
    position: absolute; 
 
    right: 40px; 
 
    margin-top: 280px; 
 
} 
 

 
.pic-ad { 
 
    margin-top: 10px; 
 
}

<div class="container-ed"> 
 
     <img class="pic-ed" src="img/pic.svg" height="550" width="600"> 
 
    <!-- <img class="x-ed" src="img/ex-ed.svg"> --> 
 
     <img class="pic-ad" src="img/Rectangle%20136.svg" height="250" width="300"> 
 
     <img class="pic-ad" src="img/Rectangle%20136.svg" height="250" width="300"> 
 
     <img class="pic-ad" src="img/Rectangle%20136.svg" height="250" width="300"> 
 
     <img class="pic-ad" src="img/Rectangle%20136.svg" height="250" width="300"> 
 
     <img class="pic-ar" src="img/Rectangle%20136.svg" height="250" width="300"> 
 

 
    </div>

來源

2017-10-08 seyi

SO不是代碼編寫服務。如果你無法做到這一點，請展示你自己的努力並回來。這是一個很好的閱讀https://stackoverflow.com/help/mcve – LGSon

@LGSon你看到我以前的努力，現在 – seyi

我不知道你要如何迴應這是。我會爲前3張圖片創建一個div元素，併爲底部創建另一個div元素。3.將第一個圖片的大小設置爲比其他圖片的大小更高，並將其左側浮動。

來源

2017-10-08 19:43:50

這是你正在尋找？

.photo-grid { 
 
    width: 400px; 
 
    height: 400px; 
 
} 
 
.grid { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    float: left; 
 
    position: relative; 
 
    box-sizing: border-box; 
 
    border: 1px solid #aaa; 
 
    background-color: #eee; 
 
} 
 
.grid:before { 
 
    content: attr(data-label); 
 
    position: absolute; 
 
    top: 3px; 
 
    left: 3px; 
 
    font-weight: bold; 
 
    color: #fff; 
 
    text-shadow: 0px 0px 1px #000; 
 
    font-size: 2rem; 
 
    font-family: sans-serif; 
 
} 
 
.grid.small { 
 
    width: 33.3%; 
 
    height: 33.3%; 
 
} 
 
.grid.medium { 
 
    width: 66.6%; 
 
    height: 66.6%; 
 
} 
 
.grid.right { 
 
    float: right; 
 
}

<div class="photo-grid"> 
 
    <div class="grid medium" data-label="1"></div> 
 
    <div class="grid small" data-label="2"></div> 
 
    <div class="grid small" data-label="3"></div> 
 
    <div class="grid small right" data-label="4"></div> 
 
    <div class="grid small right" data-label="5"></div> 
 
    <div class="grid small right" data-label="6"></div> 
 
</div>

來源

2017-10-08 20:00:30

你可以嘗試使用Twitter的引導和附加不同的高度在箱子上。 W3Schools有關於如何使用它的教程：https://www.w3schools.com/bootstrap/

來源

2017-10-08 20:03:31 ProgrammingLife

使用庫/插件爲更小和單一的目的是一個開銷。 –

我明白了。但它也可能有助於其他頁面的佈局。我使用引導程序進行響應式網頁設計以及@media查詢 – ProgrammingLife

使用其他方法之一更容易。只是想我會提出另一個選擇 – ProgrammingLife

發現很難實現照片網格佈局

回答

相關問題