在HTML中对齐两个图像

<style>
    .image {
        float: left;
        margin-right: 10px;
    }
    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }
</style>

<div class="clearfix">
    <img src="image1.jpg" alt="Image 1" class="image">
    <img src="image2.jpg" alt="Image 2" class="image">
</div>

<style>
    .container {
        display: flex;
        justify-content: space-between;
    }
</style>

<div class="container">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
</div>

<style>
    .container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 10px;
    }
</style>

<div class="container">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
</div>