css - HTML5 的图像对齐问题

Question

我有 3 张图片。 2 个 float 在左侧，尺寸为 490x260，一个更高的图像 float 在右侧，尺寸为 490x545。我想让 3 张图片并排 float ，所以左边的两张图片彼此重叠，与右边的图片高度相同。请帮忙。谢谢

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

还有CSS

.section {
padding: 4rem 0 ;
overflow: hidden;

.media-section {
background: #ebebeb; 
overflow: hidden;

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

Answer 1

• 将前 2 张图片放在同一个 col6 div 中
• 在第二个 col6 div 中有第 3 个图像
• 删除多余的col6 div
• float col6

此外，要使图像堆叠在第一列，您应该使它们display: block 并移除width 和height -不需要它们。

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

给第一列一个额外的类first

.col6.first img {
  display: block
}