Flexbox布局调试：桌面端图片与内容卡片无法同行显示问题求解

Flex规则未生效是几个基础错误直接导致的：

• 选择器与HTML结构不匹配：HTML中卡片容器使用的是class="card-container"，CSS错误用了ID选择器#card-container；行元素是class="row"，CSS写的#card-container row既没加类选择器的.标识，层级也完全错误，所有写在这些选择器里的Flex规则根本没应用到对应元素上。
• HTML结构拆分错误：把图片块、内容块分别放在了两个独立的.row容器里，两个独立块级元素默认上下排列，无法实现同一行展示。
• 父容器缺失Flex声明：就算选择器写对，卡片父容器没有设置display: flex，子元素不会按Flex规则排列。
• 尺寸和背景设置错误：图片容器高度394px、内容容器高度450px，就算并排也会错位；图片用background-size: contain会导致容器留白，无法填满区域。

桌面端预期效果参考：

1. 调整HTML结构 #

删除多余的.row嵌套，把图片和内容块放到同一个行容器里，删掉图片容器内无用的空div：

<section class="card-container">
  <div class="row">
    <div class="image"></div>
    <div class="right-container">
      <h3>Perfume</h3>
      <h1>Gabrielle Essence Eau De Parfum</h1>
      <p>A floral, solar and voluptuous interpretation composed by Olivier Polge,
        Perfumer-Creator for the House of CHANEL.</p>
      <div class="price-container">
        <h1>$149.99</h1>
        <p>$169.99</p>
      </div>
      <div class="cart-container">
        <img src="./images/icon-cart.svg" alt="card-img">
        <button class="cart-btn">Add to Cart</button>
      </div>
    </div>
  </div>
</section>

2. 替换错误CSS #

全局重置、body、基础标签样式可保留原有代码，仅把容器及后续样式替换为以下内容，修正选择器、补全Flex属性、统一尺寸：

.card-container {
    width: 600px;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto;
}

.row {
    display: flex;
    flex-direction: row;
}

.image {
    background-image: url(images/image-product-desktop.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 50%;
    min-height: 450px;
    border-radius: 10px 0 0 10px;
}

.right-container {
    background-color: white;
    border-radius: 0 10px 10px 0;
    width: 50%;
    min-height: 450px;
    padding: 2.5em;
}

.right-container h3 {
    padding: 0 0 1.5em 0;
}

.right-container h1 {
    margin: 0 0 0.8em 0;
}

.right-container p {
    padding: 0 0 2em 0;
    font-size: 0.875em;
}

.price-container {
    display: flex;
    align-items: center;
    gap: 1.5em;
    margin-bottom: 2em;
}

.price-container h1 {
    color: hsl(158, 36%, 37%);
    margin: 0;
}

.price-container p {
    text-decoration: line-through;
    margin: 0;
    padding: 0;
}

.cart-btn {
    width: 100%;
    background-color: hsl(158, 36%, 37%);
    border-radius: 10px;
    border: none;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.9em;
    padding: 1em 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7em;
}

.cart-btn:hover {
    background-color: hsl(156, 42%, 18%);
    cursor: pointer;
}

/* 移动端媒体查询修正 */
@media screen and (max-width : 667px) {
    .card-container {
        width: 90%;
        max-width: 340px;
    }
    .row {
        flex-direction: column;
    }
    .image {
        background-image: url(images/image-product-mobile.jpg);
        border-radius: 10px 10px 0 0;
        width: 100%;
        min-height: 240px;
    }
    .right-container {
        border-radius: 0 0 10px 10px;
        width: 100%;
        min-height: auto;
        padding: 1.8em;
    }
}

修改完成后桌面端两个块自动等宽并排，高度完全对齐，图片无拉伸留白；窄屏下自动切换为上下排列，和参考效果完全匹配。

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