网页开发中图片无法并排相邻排列的布局问题求解

图片纵向堆叠由三个问题直接导致：

• 未对每辆车的图片、标题、介绍做独立容器包裹，所有元素默认按块级规则逐行排布
• 父容器未配置横向布局规则，默认按普通文档流纵向排列内容
• 代码存在结构错误：logo、h1等可视内容被错误放在<head>标签内，大量<br>标签强行控距也会干扰正常布局

1. 重构HTML结构 #

修正标签嵌套错误，删除所有强行控距的<br>标签，给每辆车的内容单独包裹卡片容器，所有卡片放入统一的画廊父容器，替换原有代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="gallery.css">
    <title>Vehicle Gallery</title>
</head>
<body>
    <img src="logo.jpeg" alt="nav-bar" class="logo">
    <h1>Welcome to the Vehicle Gallery!</h1>
    <p class="intro-p">Here we have displayed the most presitge vehicles with the best hd pictures! Hopefully these will give you thought on buying these cars that we recommend.</p>
    
    <!-- 画廊父容器 -->
    <div class="car-gallery">
        <!-- 单车辆卡片 -->
        <div class="car-card">
            <img src="car1.jpeg" class="cars-body">
            <h2 class="car-title">Dodge Challenger R/T Scat Pack Shaker</h2>
            <p class="car-info">
                This has to be the most muscle car like vehicle on sale today. Its a somewhat regular model car with a lot of go fast goodies; a big powerful engine is prioritized over leather seats and luxury in this case. There’s also the fact that it has a shaker hood scoop, which ups the cool factor by 10.
            </p>
        </div>
        <!-- 单车辆卡片 -->
        <div class="car-card">
            <img src="car2.jpeg" class="cars-body">
            <h2 class="car-title">Buick Grand National </h2>
            <p class="car-info">
                This choice may get some people’s knickers in a twist. They might think that because this car doesn’t have a V8 engine, it’s not a muscle car. However, it definitely has the spirit of the muscle car in it. It’s a relatively big 4 seat 2 door car that shouldn’t be underestimated at your local drag strip. This car pulled off the turbo 6 cylinder muscle car concept very well, and many people recognize that.
            </p>
        </div>
    </div>
</body>
</html>

2. 调整CSS样式 #

修正原有字体引入的地址错误（原url中间多余空格会导致字体加载失败），新增弹性布局规则实现并排、居中、间距效果，调整原有不合理的固定边距：

@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Playfair+Display+SC&family=Tapestry&display=swap');
h1{
    color: #DEB992;
    background-color: #051622;
    display: block;
    text-align: center;
    padding: 10px;
    font-size: 36px;
    margin-top: 0;
    border-bottom: 5px solid;
    box-sizing: content-box;
}
.logo{
    float: left;
    padding: 0;
    margin: 0;
    width: 78px;
    height: auto;
}
body{
    margin: 0;
    padding: 0;
    background-color: #051622 ;
}
.intro-p{
    text-align: center;
    margin: 0 100px 50px;
    font-family: 'Tapestry', cursive;
    font-size: 24px;
    color: #DEB992;
}
/* 画廊容器：弹性布局+居中+自动换行+卡片间距 */
.car-gallery{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
    padding: 0 20px;
}
/* 单卡片宽度配置 */
.car-card{
    width: 35%;
    min-width: 300px;
}
.car-title{
    color: #1BA098;
    font-size: 24px;
    text-decoration: overline;
    font-family: 'Playfair Display SC', serif;
    margin: 15px 0;
    text-align: center;
}
.cars-body{
    width: 100%;
    border-radius: 25px;
    margin: 0;
    max-width: 100%;
}
.car-info{
    color: #1BA098;
    font-size: 20px;
    margin: 0;
    line-height: 1.5;
}

• 车辆卡片横向并排排布，屏幕宽度不足时自动换行，不会出现横向溢出
• 整个画廊区块在页面居中，卡片间保留40px的统一合理间距
• 图片、标题、介绍跟随卡片宽度自适应，不会出现错位偏移
• 原谷歌字体引入错误修复，字体可正常加载显示

内容的提问来源于stack exchange，提问作者Big Bred Zach