Laravel 10前端产品对比布局调整：垂直改水平展示

1. 调整Blade视图基础结构 #

把原垂直布局的容器改成水平弹性布局，确保产品项横向排列且支持横向滚动：

<div class="comparison-container">
    @foreach($products as $product)
        <div class="product-card">
            <h3 class="product-name">{{ $product->name }}</h3>
            <div class="product-specs">
                <div class="spec-row">
                    <span class="spec-label">价格:</span>
                    <span class="spec-value">¥{{ $product->price }}</span>
                </div>
                <div class="spec-row">
                    <span class="spec-label">库存:</span>
                    <span class="spec-value">{{ $product->stock }}件</span>
                </div>
                <!-- 其他产品属性 -->
            </div>
        </div>
    @endforeach
</div>

2. 添加核心CSS样式 #

通过原生CSS实现水平布局和对齐效果，无需依赖框架：

.comparison-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1.2rem;
    padding: 1rem 0;
    scrollbar-width: thin;
}

.product-card {
    flex-shrink: 0;
    width: 260px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.2rem;
    background: #fff;
}

.product-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid #f3f4f6;
}

.product-specs {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 0.8rem;
}

.spec-row {
    grid-column: 1 / -1;
    display: contents;
}

.spec-label {
    text-align: right;
    color: #6b7280;
}

.spec-value {
    font-weight: 500;
}

3. 修改AJAX动态渲染代码 #

确保动态追加的产品项和Blade结构、样式完全一致：

// AJAX成功回调示例
$.ajax({
    url: '/compare/add',
    method: 'POST',
    data: { product_id: productId },
    success: function(res) {
        const productHtml = `
            <div class="product-card">
                <h3 class="product-name">${res.product.name}</h3>
                <div class="product-specs">
                    <div class="spec-row">
                        <span class="spec-label">价格:</span>
                        <span class="spec-value">¥${res.product.price}</span>
                    </div>
                    <div class="spec-row">
                        <span class="spec-label">库存:</span>
                        <span class="spec-value">${res.product.stock}件</span>
                    </div>
                </div>
            </div>
        `;
        $('.comparison-container').append(productHtml);
    }
});

4. 优化细节 #

• 若需要固定表头（属性标签统一左侧展示），可以把属性标签抽离成单独的固定列，产品项只展示属性值
• 给横向滚动条添加自定义样式，提升视觉体验
• 支持响应式：在移动端自动切换为垂直布局，可通过媒体查询实现

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