[分享]css两张图片同一行

在CSS中，我们可以使用display属性来调整元素的显示方式。对于一组图片，我们可以将它们设置为行内元素，这样就可以在同一行上显示。.colimg{ display: inlineblock; ma...

在CSS中，我们可以使用display属性来调整元素的显示方式。对于一组图片，我们可以将它们设置为行内元素，这样就可以在同一行上显示。

.col-img{
    display: inline-block;
    margin-right: 10px;
} 

上面的代码中，我们将元素的display属性设置为inline-block，这样就可以将其显示在同一行上，而不是默认的一行一个元素。同时，我们也为每个图片添加了margin-right属性来调整它们之间的间隔。

在HTML中，我们可以将每个图片包裹在一个div或span元素中，并为其添加col-img类名。

<div class="col-img">
    <img src="image1.jpg" alt="图片1">
</div>
<div class="col-img">
    <img src="image2.jpg" alt="图片2">
</div> 

上面的代码中，我们为每个图片包裹了一个div元素，并添加了col-img类名。这样，在应用我们的CSS样式时，我们就可以通过选择col-img类名来为每个图片添加样式。

通过上述方式，我们就可以轻松地让两张图片在同一行上显示，并通过CSS调整它们之间的间隔。