如何使用DIV结合Flexbox/Grid实现元素并排多列布局

核心问题排查 #

• ::after伪元素不生效：<img>是自闭合替换元素，不支持子内容，伪元素无法挂载。要实现图片下方说明文字，需要给图片套一层容器元素，将伪元素绑定到容器上。
• 你写的Grid布局代码存在语法错误：混用了多列布局属性columns和Grid布局属性，且HTML结构残留了旧table布局的</td>无效标签，同时错误地将每个商品项单独设为多列容器，无法实现单条商品内的左右分栏效果。

基于CSS Grid的实现代码（推荐，最贴合需求） #

Grid布局可以直接通过grid-template-columns定义两列宽度，用column-gap快速设置列间距，代码如下：

body {
    font-family: Verdana, sans-serif;
    font-size: 14px;
    background: #fff;
    padding: 20px;
}
h1 {
    font-size: 22px;
    margin: 0 0 15px;
}
/* 商品列表整体容器 */
.stock-list {
    width: 400px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* 单个商品项：两列布局 */
.autota {
    display: grid;
    grid-template-columns: 190px 1fr;
    column-gap: 12px;
    border: 1px solid #000;
    padding: 8px;
    align-items: start;
}
/* 图片包裹层，用于挂载说明伪元素 */
.img-box {
    position: relative;
}
.img-box img {
    width: 100%;
    display: block;
}
/* 图片说明文字 */
.img-box::after {
    content: "Image for illustration purposes only";
    font-weight: 300;
    font-size: 12px;
    display: block;
    text-align: center;
    margin-top: 4px;
    color: #333;
}
/* 文字区域样式匹配设计 */
.car-desc .car-name {
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
}
.car-desc .price {
    font-weight: bold;
}

对应的HTML结构（清理了旧table残留标签）：

<h1>Stock list</h1>
<div class="stock-list">
    <div class="autota">
        <div class="img-box">
            <img src="https://live.staticflickr.com/622/20721274966_b37363d59c_b.jpg" alt="2014 FORD FOCUS">
        </div>
        <div class="car-desc">
            <span class="car-name">2014 FORD FOCUS 1.0 TITANIUM 5dr</span>
            silver <span class="price">£6999</span>
        </div>
    </div>
    <div class="autota">
        <div class="img-box">
            <img src="https://live.staticflickr.com/3088/3127519858_8b75af8af5_z.jpg" alt="1999 NISSAN MAXIMA">
        </div>
        <div class="car-desc">
            <span class="car-name">1999 NISSAN MAXIMA 3.0 V6 GXE 4dr</span>
            blue <span class="price">£500</span>
        </div>
    </div>
    <div class="autota">
        <div class="img-box">
            <img src="https://live.staticflickr.com/1276/919479405_86966cd5ec_o.jpg" alt="1983 CHRYSLER E-CLASS">
        </div>
        <div class="car-desc">
            <span class="car-name">1983 CHRYSLER E-CLASS 2.2 4dr</span>
            white, classic car <span class="price">£3290</span>
        </div>
    </div>
</div>

Flex布局实现版本 #

如果偏好Flex布局，只需要替换.autota部分的CSS即可，其余结构和样式不变：

.autota {
    display: flex;
    gap: 12px;
    border: 1px solid #000;
    padding: 8px;
    align-items: start;
}
.autota .img-box {
    flex: 0 0 190px;
}
.autota .car-desc {
    flex: 1;
}

注意事项 #

• columns属性是用于实现文本类内容的多栏流布局，不适合用来做组件级的两列并排结构，不要和Grid/Flex布局属性混用。
• 所有自闭合空标签（img、input、hr等）都不支持::before/::after伪元素，需要加装饰内容时必须嵌套父容器。
• 迁移旧table布局时要彻底清理残留的table相关标签（如</td>、<tr>等），避免浏览器解析结构错乱。

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