html5 让两个img并排
时间: 2023-07-27 21:09:35 浏览: 107
可以使用CSS中的`display: inline-block`和`float: left`来让两个`<img>`标签并排显示。以下是一个示例代码:
```html
<style>
.img-container {
width: 100%;
}
.img-container img {
display: inline-block;
float: left;
width: 50%;
}
</style>
<div class="img-container">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
</div>
```
在上面的示例中,我们创建了一个包含两个`<img>`标签的容器,并将它们的`display`属性设置为`inline-block`和`float`属性设置为`left`。另外,我们还将每个`<img>`标签的宽度设置为50%,以便它们能够平均分配可用的宽度。
相关问题
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.