[分享]css中怎么使2个div并排显示图片

CSS中有多种方法可以使两个div并排显示图片。以下是两种基本方法：

方法一：

  <div class="container">
        <div class="image">
            <img src="image1.jpg" alt="image1">
        </div>
        <div class="image">
            <img src="image2.jpg" alt="image2">
        </div>
    </div>

    .container {
        display: flex;
    }
    .image {
        flex-grow: 1;
        margin: 0 10px;
    } 

使用此方法，我们首先创建一个包含两个div的容器。然后，我们设置容器的display属性为flex，这意味着它的子元素将以行的方式排列。接着，我们设置每个div的flex-grow属性为1。这使它们平等地占据父容器中剩余的空间，并使它们呈现为相等的大小。最后，我们设置每个div的margin为10px，以便它们之间具有适当的间距。

方法二：

  <div class="container">
        <div class="left-image">
            <img src="image1.jpg" alt="image1">
        </div>
        <div class="right-image">
            <img src="image2.jpg" alt="image2">
        </div>
    </div>

    .container {
        width: 100%;
    }
    .left-image {
        width: 50%;
        float: left;
    }
    .right-image {
        width: 50%;
        float: left;
    } 

使用此方法，我们创建一个包含两个子元素的容器。然后，我们设置容器的width为100%，以使其占据整个父元素的宽度。接着，我们将左侧图片设置为width的50%和float的left。这使它占据了其父元素宽度的一半，并且将其从文本流中取出，以排列右侧的图片。最后，我们设置右侧图片的width为50%和float为left，以使其也占据一半的宽度和正确的位置。

无论使用哪种方法，都可以轻松地让两个div并排显示图片。使用flexbox的方法更为先进，并且更加灵活，而第二种方法更适合旧版本的浏览器。