Display img Elemente im vertikalen Stapel neben anderen img?

Question

Ich versuche, eine Gruppe von img Elemente wie folgt angezeigt:

Ich versuchte Schwimmer mit: links auf IMG 1 und float: right auf den anderen IMGs aber sie säumen nicht senkrecht nach oben . Wie würde ich das tun?

Answer 1

Eine Möglichkeit, dies zu tun ist haben zwei Kinder divs im Container div. Man sollte img1 sein und der andere sollte enthalten die anderen drei, die auch display: block; richtig haben sollte arbeiten (img2, img3 und img 4).

• Put float: left; auf img1 und float: right auf der container der drei kleineren.

• Um auf der sicheren Seite zu sein, setzen Sie erneut auf img1 und die neue container: vertical-align: middle.

• Wenn die Container auch feste Abmessungen haben, wird es noch einfacher.

Bild:

Answer 2

Flexbox sollte mit dieser Arbeit.

Zuerst setzen Sie display: flex und auf übergeordneten Container.

Zweitens, setzen Sie display: flex dann flex-direction: column auf den richtigen Container.

Die Bilder werden vertikal ausgerichtet.

.container { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.left { 
 
    margin-right: 10px; 
 
} 
 

 
.right { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.right img { 
 
    margin: 5px 0; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
    <img src="http://placehold.it/320"> 
 
    </div> 
 
    <div class="right"> 
 
    <img src="http://placehold.it/150x100"> 
 
    <img src="http://placehold.it/150x100"> 
 
    <img src="http://placehold.it/150x100"> 
 
    </div> 
 
</div>