如何垂直对齐文本和4个图像？

Fran 发表于 Dev

弗兰

我正在尝试构建一个页面，该页面的文本段落中的四边形直接包含4个图像。问题是我以前尝试过使用浮点数，但是正如预期的那样，这没有用，到目前为止，我有这个... http://www.franhaines.co.uk/paddlethewye/

代码：

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

#intro-text {
	background-color: #16818a;
	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) {
	 transform-origin: bottom left; 
}
	 
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>

任何帮助将不胜感激，加油！

Dowomenfart

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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。