html怎么用div实现一行放两张图片

在HTML中，使用<div>标签实现一行放置两张图片是一个常见的需求，下面我将详细为大家介绍如何实现这一效果。

我们需要创建一个HTML文档，并在其中添加<div>标签来作为图片的容器，为了让两张图片能够并排显示，我们需要利用CSS样式对<div>标签进行布局设置。

html怎么用div实现一行放两张图片

以下是具体的步骤和代码示例：

1、创建HTML结构：

Markup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一行放两张图片</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="image-container">
        <div class="image-item">
            <img src="image1.jpg" alt="图片1">
        </div>
        <div class="image-item">
            <img src="image2.jpg" alt="图片2">
        </div>
    </div>
</body>
</html>

2、添加CSS样式：

我们需要创建一个名为styles.css的CSS文件，并对<div>标签进行样式设置。

CSS

/* styles.css */
.image-container {
    display: flex; /* 使用flex布局 */
    justify-content: space-between; /* 两端对齐 */
    margin: 20px; /* 外边距 */
}
.image-item {
    width: 45%; /* 设置图片容器的宽度，两张图片共占100% */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); /* 阴影效果 */
}
.image-item img {
    width: 100%; /* 图片宽度自适应容器宽度 */
    height: auto; /* 高度自适应 */
}