HTML/CSS如何排列不同大小的图片

在网页设计中，有时需要在同一行或同一区域显示不同大小的图片。以下介绍几种HTML/CSS排列不同大小的图片的方法：

使用float属性

<div class="image-container">
    <img src="large.jpg" class="large-image">
    <img src="small1.jpg" class="small-image">
    <img src="small2.jpg" class="small-image">
</div>

.large-image {
    float: left;
    width: 60%;
    margin-right: 10%;
}
.small-image {
    float: left;
    width: 20%;
    margin-right: 10%;
}

上面的代码中，使用了float属性将图片浮动到左侧，同时分别设置了宽度和margin-right，使得图片与相邻图片之间有一定的间隔。

使用display:inline-block属性

<div class="image-container">
    <img src="large.jpg" class="large-image">
    <img src="small1.jpg" class="small-image">
    <img src="small2.jpg" class="small-image">
</div>

.image-container {
    font-size: 0;
    text-align: center;
}
.large-image, .small-image {
    display: inline-block;
    vertical-align: top;
}
.large-image {
    width: 60%;
    margin-right: 10%;
}
.small-image {
    width: 20%;
    margin-right: 10%;
}

上面的代码中，设置了image-container的字体大小为0，以消除inline-block元素之间的间隔。同时，设置了display:inline-block和vertical-align:top属性，使得图片在同一行内水平对齐，同时垂直对齐。

使用flexbox布局

<div class="image-container">
    <img src="large.jpg" class="large-image">
    <img src="small1.jpg" class="small-image">
    <img src="small2.jpg" class="small-image">
</div>

.image-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.large-image {
    flex-basis: 60%;
    margin-right: 10%;
}
.small-image {
    flex-basis: 20%;
    margin-right: 10%;
}

上面的代码中，使用了flexbox布局，设置了display:flex属性，使得image-container容器内的元素成为flex容器。同时，设置了justify-content:space-between和align-items:center属性，使得图片在水平和垂直方向上对齐。最后，设置了flex-basis属性和margin-right属性，实现图片的大小和间隔效果。

以上是几种常用的HTML/CSS排列不同大小的图片的方法，可以根据实际情况选择合适的方法。