Css HTML5的图像对齐问题

我有3张照片。2个浮动在左侧，尺寸为490x260，一个更高的图像浮动在右侧，即490x545。我想让这3个图像并排浮动，这样两个左上角的图像与右边较高的图像的高度相同。请帮忙。多谢各位

<div class="media-section">
            <div class="section">
                <div class="container">
                    <div class="row">
                        <div class="col6">
                            <div class="media-section__thumbnail thumbnail">
                                <a href=""><img src="imgs/florida_door.jpg">
                                <p><i class="fa fa-chevron-right"></i></p></a>
                            </div>
                        </div>
                        <div class="col6">
                            <div class="media-section__thumbnail thumbnail">
                                <a href="#"><img src="imgs/book_now_door.jpg">
                                <p><i class="fa fa-chevron-right"></i></p></a>
                            </div>
                        </div>

                        <div class="col6">
                            <div class="media-section__thumbnail  thumbnail">
                                <a href="sub_pages/las_salinas_spain.html"><img src="imgs/spain_door.jpg">
                                <p><i class="fa fa-chevron-right"></i></p></a>
                            </div>
                        </div>
                    </div><!--row end-->
                </div><!--container end-->
            </div><!--section end-->
        </div><!--medi-section end-->   

}

}

}

}

}

• 在同一col6 div中具有前2个图像
• 在第二个col6 div中有第三个映像
• 卸下额外的col6 div
• 把可乐浮起来

此外，要使图像堆叠在第一列中，您应该使它们

显示：block

，并删除

宽度

和

高度

——它们不需要

.col6 {
  width: 50%;
  float: left;
}

为第一列添加

first

.col6.first img {
  display: block
}

---

现在可以了，干杯！我现在唯一的问题是底部的文本作为与图像的链接。缩略图p{位置：绝对；底部：1%；右侧：8%；字体系列：“Lato”，无衬线，arial；文本转换：大写；字体重量：600；颜色：#fff；字母间距：.4rem；文本对齐：居中；}我可以想象，左两幅图像上的文本都显示在底部，因为

位置：绝对

。把它拿走，没关系。我添加了相对于其父级“缩略图”的位置及其全部排序。干杯，伙计！！！

.container {
width: 70%;
margin: 0 auto;
max-width: 1000px;

.thumbnail img {
border: 2px solid #fff;
box-shadow: 0 0 1px 0 #184450;
width: 100%;
height: auto;

.media-section__thumbnail p {
position: absolute;
bottom: 1%;
right: 8%;
font-family: 'Lato', sans-serif, arial;
text-transform: uppercase;
font-weight: 600;
color: #fff;
letter-spacing: .4rem;
text-align: center;

.col6 {
  width: 50%;
  float: left;
}

.col6.first img {
  display: block
}