html5 让两个img并排
时间: 2023-07-27 19:09:35 浏览: 54
可以使用CSS中的`float`属性将两个`<img>`元素浮动并排。示例代码如下:
```html
<div>
<img src="image1.jpg" style="float:left; width:50%;">
<img src="image2.jpg" style="float:right; width:50%;">
</div>
```
这样,两个图片就能够并排显示了。`float:left`将第一个图片向左浮动,`float:right`将第二个图片向右浮动。`width`属性可以设置图片宽度,以便让它们能够适应容器的宽度。为了避免图片重叠,最好给它们所在的容器设置一个适当的宽度。
相关问题
html 两张图片并排
可以使用HTML和CSS来实现两张图片并排的效果。以下是一个简单的例子:
```html
<div class="image-container">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
</div>
```
```css
.image-container {
display: flex;
justify-content: space-between;
}
.image-container img {
width: 45%;
height: auto;
}
```
上述代码中,我们使用了一个包含两张图片的`<div>`元素,并将其设置为`display: flex`,这样两张图片就会并排排列。我们还使用了`justify-content: space-between`来让两张图片之间有一定的间距。最后,我们使用了`width: 45%`来限制每张图片的宽度,以便它们可以适应屏幕大小。
请写一个html,并排显示两个图片
Sure, here's an example HTML code to display two images side by side:
```
<!DOCTYPE html>
<html>
<head>
<title>Two Images Side by Side</title>
</head>
<body>
<div style="display: flex;">
<img src="image1.jpg" style="width: 50%; margin-right: 10px;">
<img src="image2.jpg" style="width: 50%;">
</div>
</body>
</html>
```
You can replace "image1.jpg" and "image2.jpg" with the file names of the images you want to display. The "width" and "margin-right" styles are used to adjust the size and spacing between the images. Feel free to modify the code to suit your needs.