Finden Sie es schwierig, Foto-Raster-Layout zu erreichen

Question

Ich finde es schwierig, diese genaue Foto-Raster alle Ideen, wie man darüber zu erreichen? enter image description here

zur Klärung, ich hatte bereits Prototypen arbeiten enter image description here, die mit Flexbox getan wurde, aber man war nicht fiting in gut, so dass ich absolute Position zu verwenden, hatte die gut funktioniert nicht, wenn sie auf andere Bildschirmgröße angezeigt.

Heres war mein Code

.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>

Answer 1

Ich bin nicht sicher, wie reagieren Sie dies wollen. Ich würde ein Div-Element für die ersten 3 Bilder und ein anderes für die unteren 3 Bilder machen, die Größe des ersten Bildes als einen höheren Anteil als die anderen einstellen und sie nach links schweben lassen.

Answer 2

ist das, was Sie suchen?

.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>

Answer 3

Sie versuchen twitter Bootstrap verwenden könnten und verschiedene Höhen zu den Boxen anhängen. W3Schools hat ein Tutorial, wie man es benutzt: https://www.w3schools.com/bootstrap/