CSS卡片设置inline-block/float/flex后仍无法水平并排对齐

之前尝试的几种布局方案失效，核心问题都是布局规则的作用对象写错了：

• 块级div元素默认占满整行宽度，给卡片本身加布局规则但不改变其块级属性的话，元素始终会垂直堆叠
• Flex布局的排列规则必须加在直接包裹所有卡片的父元素上才会生效，把flex属性加在卡片子元素上没有任何作用
• 浮动、inline-block方案如果只加属性不处理元素默认display、文档流、间隙问题，也无法实现预期排列

第一步：调整HTML结构 #

给所有卡片加一层共同的父容器，作为Flex布局的载体：

<div class="card-wrapper">
    <div class="card1">
        <div class="card-content1">
            <h2 class="card-title1">Portfolio projects</h2>
            <p class="card-body1"></p>    
            <a href="#" class="button1">Projects</a>
        </div>
    </div>
    <div class="card2">
        <div class="card-content2">
            <h2 class="card-title2"> About me</h2>
            <p class="card-body2"></p>
            <a href="" class="button2">About me</a>
        </div>
    </div>
</div>

第二步：修改CSS样式 #

抽离卡片重复样式，给父容器加Flex布局规则，同时修复card1背景图为空的问题：

/* 父容器控制子元素横向排列 */
.card-wrapper {
    display: flex;
    justify-content: center; /* 卡片水平居中 */
    align-items: flex-start; /* 卡片顶部对齐，避免高度不一致时错位 */
    flex-wrap: wrap; /* 屏幕宽度不足时自动换行，适配移动端 */
    gap: 30px; /* 精准控制卡片间距，替代卡片自带margin，避免容器边缘出现多余边距 */
    padding: 2rem 1rem;
}

/* 两个卡片的公共样式抽离，减少冗余代码 */
.card1, .card2 {
    color: white;
    background-size: cover;
    padding: 10rem 0 0;
    max-width: 35ch;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 500ms ease, box-shadow 400ms;
}

/* 单独设置两个卡片的背景图，记得补全card1的图片路径 */
.card1 {
    background-image: url(/* 填入card1对应的图片路径 */);
}

.card2 {
    background-image: url(./images/osoandme.jpg);
}

• inline-block方案：无需新增父容器，直接给.card1, .card2添加display: inline-block; vertical-align: top;即可实现横向排列，缺点是HTML代码的换行会在卡片之间生成默认空白间隙，需要额外通过修改父容器font-size、删除标签间换行等方式处理，维护成本高。
• 浮动方案：给.card1, .card2添加float: left;，同时给父元素添加清除浮动规则（如overflow: auto;）避免高度塌陷，缺点是浮动元素会脱离正常文档流，后续添加其他页面元素时很容易出现排版错乱。

注意：如果配置完Flex布局后卡片仍然垂直排列，先检查父容器可用宽度是否小于两个卡片加间距的总宽度，宽度不足时flex-wrap: wrap会自动将卡片折行，属于正常的响应式表现。

内容的提问来源于stack exchange，提问作者e46996