Как вертикально выровнять текст и 4 изображения?

Question

Я пытаюсь создать страницу с абзацем текста с 4 изображениями в квадрате, которые находятся прямо справа от него. Проблема в том, что я ранее пытались использовать поплавки, но, как и следовало ожидать, это не сработало, и до сих пор у меня есть это ... http://www.franhaines.co.uk/paddlethewye/

Код:

#panel1 { 
 
\t padding: 5%; 
 
\t width: 100%; 
 
\t background-color: #16818a; 
 
} 
 

 
#intro-text { 
 
\t background-color: #16818a; 
 
\t width: 50%; 
 
} 
 

 
div#quad { 
 
    background-color: #111; font-size: 0; 
 
    width: 50%; margin: 0 auto; 
 
} 
 

 
div#quad figure { 
 
    margin: 0; width: 50%; height: auto; 
 
    transition: 1s; display: inline-block; 
 
    position: relative; 
 
} 
 

 
div#quad figure img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
div#quad figure:nth-child(1) { 
 
    transform-origin: top left; 
 
} 
 

 
div#quad figure:nth-child(2) { 
 
    transform-origin: top right; 
 
} 
 

 
div#quad figure:nth-child(3) { 
 
\t transform-origin: bottom left; 
 
} 
 
\t 
 
div#quad figure:nth-child(4) { 
 
    transform-origin: bottom right; 
 
} 
 

 
.expanded { 
 
    transform: scale(2); 
 
    z-index: 5; 
 
} 
 

 
div.full figure:not(.expanded) { 
 
    pointer-events: none; 
 
} 
 

 
div#quad figure:hover { 
 
    cursor: pointer; 
 
    z-index: 4; 
 
}

<section id="panel1"> 
 
<div id='intro-text'> 
 
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac dui enim.</h3> 
 
</div> 
 

 
<div id="quad"> 
 
<figure> 
 
<img src="http://www.franhaines.co.uk/paddlethewye/wp-content/uploads/2015/02/courses.jpg" alt="courses" width="1000" height="700" class="alignnone size-full wp-image-31" /> 
 
</figure> 
 
<figure> 
 
<img src="http://www.franhaines.co.uk/paddlethewye/wp-content/uploads/2015/02/rental.jpg" alt="rental" width="1000" height="700" class="alignnone size-full wp-image-32" /> 
 
</figure> 
 
<figure> 
 
<img src="http://www.franhaines.co.uk/paddlethewye/wp-content/uploads/2015/02/tour.jpg" alt="tour" width="1000" height="700" class="alignnone size-full wp-image-33" /> 
 
</figure> 
 
<figure> 
 
<img src="http://www.franhaines.co.uk/paddlethewye/wp-content/uploads/2015/02/where.jpg" alt="where" width="2592" height="1944" class="alignnone size-full wp-image-34" /> 
 
</figure> 
 
</div> 
 
</section>

Любой помощь будет оценена, ура!

Answer 1

http://jsfiddle.net/fncjqonn/1/. Поплавок #intro-text и div#squad слева. Затем width: 50%; на div#squad figure

#panel1 { 
    padding: 5%; 
    width: 100%; 
    background-color: #16818a; 
    overflow: hidden; 
} 
#intro-text { 
    background-color: #16818a; 
    width: 50%; 
    float: left; 
} 
div#quad { 
    background-color: #111; 
    font-size: 0; 
    width: 50%; 
    margin: 0 auto; 
    float: left; 
} 
div#quad figure { 
    margin: 0; 
    width: 50%; 
    height: auto; 
    transition: 1s; 
    display: inline-block; 
    position: relative; 
} 

Answer 2

Вы можете использовать display:table & table-cell, чтобы расположить обертывающие div и поплавать изображениями.

#panel1 { 
 
    display: table; 
 
    width: 100%; 
 
    table-layout:fixed; /* split columns equally */ 
 
} 
 
#intro-text { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
#quad { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
#quad img { 
 
    display: block; 
 
    width: 50%; 
 
    height: auto; 
 
    float: left; 
 
}

<section id="panel1"> 
 
    <div id='intro-text'> 
 

 
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac dui enim.</h3> 
 

 
    </div> 
 
    <div id="quad"> 
 
    <figure> 
 
     <img src="http://www.franhaines.co.uk/paddlethewye/wp-content/uploads/2015/02/courses.jpg" alt="courses" class="alignnone size-full wp-image-31" /> 
 
    </figure> 
 
    <figure> 
 
     <img src="http://www.franhaines.co.uk/paddlethewye/wp-content/uploads/2015/02/rental.jpg" alt="rental" class="alignnone size-full wp-image-32" /> 
 
    </figure> 
 
    <figure> 
 
     <img src="http://www.franhaines.co.uk/paddlethewye/wp-content/uploads/2015/02/tour.jpg" alt="tour" class="alignnone size-full wp-image-33" /> 
 
    </figure> 
 
    <figure> 
 
     <img src="http://www.franhaines.co.uk/paddlethewye/wp-content/uploads/2015/02/where.jpg" alt="where" class="alignnone size-full wp-image-34" /> 
 
    </figure> 
 
    </div> 
 
</section>

В идеале изображения должны быть одинакового размера.