[分享]css两张图片一起显示

在网页设计中，经常会出现需要将两张图片一起显示的情况。在CSS中，有许多方法可以实现这个效果，下面我们就来介绍一下其中两种方法。1. 使用float属性首先先在HTML文件中插入两张想要一起显示的图片...

在网页设计中，经常会出现需要将两张图片一起显示的情况。在CSS中，有许多方法可以实现这个效果，下面我们就来介绍一下其中两种方法。

1. 使用float属性

首先先在HTML文件中插入两张想要一起显示的图片，在这里我们用两张不同大小的图片作为例子：

<img src="image1.jpg" width="200" height="300">
<img src="image2.jpg" width="400" height="200"> 

接着在CSS文件中给这两张图片分别设定一个class，并设置宽度和float属性：

img.left {
  width: 200px;
  float: left;
}
img.right {
  width: 400px;
  float: right;
} 

这样两张图片就可以左右分别浮动，实现并排显示的效果。

2. 使用display属性

还有一种方法是使用display属性，将两张图片以行内元素的方式呈现。在HTML文件中插入两张图片，并为它们设置class：

<img src="image1.jpg" class="inline-img">
<img src="image2.jpg" class="inline-img"> 

在CSS文件中，设置这个class的display属性为inline-block，同时给width属性设定宽度和height属性设定高度：

.inline-img {
  display: inline-block;
  width: 200px;
  height: 200px;
} 

这样两张图片就可以以行内块元素的方式并排显示。可以在代码中适当调整宽度和高度的数值，从而达到理想的显示效果。