使用React+CSS开发训练用结账页时文本无法行内对齐求助

核心思路 #

• 放弃float、绝对定位这类易脱离文档流、适配性差的布局方案，全程使用Flex布局实现行内对齐，天然适配元素排列、对齐需求，多终端适配性更强
• 按模块拆分结构：商品项拆分为「图片固定区+内容自适应区」，底部金额区域每一行拆分为「左侧标签+右侧内容」，分别控制对齐规则

React组件修改 #

仅需调整render函数内的JSX结构，其余逻辑无需改动：

render() {
    return (
        <div>
            <h2 className="order-header">Here's What You've Ordered</h2>
            <div>
                <div>
                    {this.state.itemList.map((item, index) => (
                        <div className="order-item" key={index}>
                            <img className="prod" src={item.image} alt=""/>
                            <div className="item-info">
                                <p className="name"> {item.name}</p>  
                                <div className="item-meta">
                                    <span>QTY{item.quantity}</span>
                                    <span>£{item.price}</span>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
                <div className="total">
                    <div className="total-row">
                        <h3>Subtotal</h3>
                        <h3>£{this.total()}</h3>
                    </div>
                    <div className="total-row">
                        <span>Delivery</span>
                        <div className="delivery-info">
                            <span>Next Working Day (if ordered before 3pm)</span>
                            <h3>Free</h3>
                        </div>
                    </div>
                    <div className="total-row total-line">
                        <h3>Total</h3>
                        <h3>£{this.total()}</h3>
                    </div>
                    <div className="payment">
                        <p>You paid using Mastercard</p>
                        <img className="card-icon" src="Images/card-icon.svg" alt="card" />
                    </div>
                </div>
            </div>
        </div>
    );
}

注：原单独设置的.line-bottom分割线div可直接删除，已通过CSS为total区域添加上边框实现分割效果

CSS代码修改 #

全量替换原有CSS即可：

/* 公共头部样式 */
.order-header {
    margin-left: 20px;
}

/* 商品项样式 */
.order-item {
    display: flex;
    gap: 16px;
    margin-left: 20px;
    margin-bottom: 24px;
    font-weight: bolder;
    font-size: 12px;
    align-items: flex-start;
}
.prod {
    height: 100px;
    width: 100px;
    flex-shrink: 0;
}
.item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100px;
}
.name {
    margin: 0;
    font-size: 12px;
}
.item-meta {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

/* 底部结算区域样式 */
.total {
    margin: 0 20px;
    padding-top: 20px;
    border-top: 1px solid lightgray;
    font-size: 12px;
}
.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.delivery-info {
    display: flex;
    align-items: center;
    gap: 24px;
}
.total-line {
    border-top: 1px solid lightgray;
    padding-top: 12px;
}

/* 支付信息样式 */
.payment {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}
.card-icon {
    height: 40px;
    width: 40px;
}

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