Совместите три изображений рядом друг с другом, с другой на верхней части центра изображений

Question

У меня есть четыре изображения, и я пытаюсь поставить три в центре и один на верхней части центра изображения, как это:

   [image2] 
[image1]  [image3]  [image4] 

Вот пример изображения того, что я имею в виду: http://prnt.sc/a9iyu6

Единственная проблема заключается в том, что все изображения находятся под друг другом.

Это код, который я сейчас использую:

<img src="images1.png" /> 
<img src="images2.png" /> 
<img src="images3.png" /> 
<img src="images4.png" /> 

Answer 1

Вот идея: JsFiddle

Это CSS:

#container{ 
    display:flex 
} 
#centered{ 
    display:flex; 
    flex-direction:column; 
} 

И обновленный HTML:

<div id="container"> 
    <img src="http://placehold.it/150x250/CCCCCC" /> 
<div id="centered"> 
    <img src="http://placehold.it/150x150/FEFEFE" /> 
    <img src="http://placehold.it/150x150/AAAAAA" /> 
</div> 
    <img src="http://placehold.it/150x250/BBBBBB" /> 
</div> 

Flex-box is pretty cool. Просто поиграйте с этим немного, и вы получите его так, как хотите.

Answer 2

Что Вы думаете о решениях, как here

я написал просто CSS, которые должны сделать работу для Вас:

body { 
 
    text-align: center; 
 
} 
 

 
img { 
 
    float: left; 
 
    width: 33%; 
 
    height: 100px; 
 
} 
 

 
img:nth-child(1){ 
 
    margin-top: 100px; 
 
} 
 

 
img:nth-child(3) { 
 
    margin-top: 100px; 
 
} 
 

 
img:nth-child(4){ 
 
    float: left; 
 
    clear: both; 
 
    margin-left: 33%; 
 
    margin-top: -100px; 
 
}

<img src="http://lorempixel.com/200/200/"/> 
 
<img src="http://lorempixel.com/200/200/?v=2"/> 
 
<img src="http://lorempixel.com/200/200/"/> 
 
<img src="http://lorempixel.com/200/200/"/>

В этом решении вам не нужно ничего добавлять к вашему коду, кроме некоторого CSS. Конечно, вы можете попытаться настроить поля на то, что вы точно хотите получить.

Answer 3

Это то, что вы хотите?

div { 
 
    padding-top:100px; 
 
    display:inline-block; 
 
} 
 

 
img { 
 
    float:left; 
 
    height:100px; 
 
    width:50px; 
 
} 
 

 
img:nth-child(2) { 
 
    margin-top:-100px; 
 
}

<div> 
 
<img src="images1.png" /> 
 
<img src="images2.png" /> 
 
<img src="images3.png" /> 
 
<img src="images4.png" /> 
 
</div>