【CSS】多个图片在同一行显示
要在CSS中使多个图片显示在同一行，可以使用CSS的float属性或者使用flexbox布局。以下是两种方法的示例代码：
使用float属性：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 100%; /* 确保父容器宽度足够 */
}
.container img {
float: left; /* 让图片向左浮动 */
margin-right: 10px; /* 图片之间的间隔 */
}
</style>
</head>
<body>
<div class="container">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
</body>
</html>使用flexbox布局：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex; /* 使用flexbox布局 */
justify-content: flex-start; /* 图片靠左排列 */
gap: 10px; /* 图片之间的间隔 */
}
</style>
</head>
<body>
<div class="container">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
</body>
</html>在这两种方法中，float属性是一种较早的布局方法，而flexbox是一种现代布局方法，提供更多的灵活性和更好的空间分配控制。根据需求和浏览器兼容性选择合适的方法。
评论已关闭