购物车页面LocalStorage数据布局问题求助：实现标题/价格/数量/总价对应排列

Hey there! Let's sort out that cart layout issue you're dealing with. The problem is that your current code generates each part of a cart item (image/name, price, quantity, total) as separate sibling elements—so when you use flex, they either stack vertically or all crowd into one row. We need to wrap each full item in a container so each entry gets its own row, with columns aligned to your header.

Here's the Step-by-Step Fix: #

1. Update Your JavaScript to Wrap Each Item in a Row Container #

Right now, you're outputting four separate divs per item. We'll wrap all four in a single .product-row div so each item is a self-contained row.

Modified displayCart() function:

function displayCart() {
  let cartItems = localStorage.getItem('ProductsinCart');
  cartItems = JSON.parse(cartItems);
  let productContainer = document.querySelector(".products")
  if(cartItems && productContainer) {
    productContainer.innerHTML = '';
    Object.values(cartItems).map(item => {
      productContainer.innerHTML += `
      <div class="product-row">
        <div class="product">
          <img src="./imagesForCart/${item.tag}.jpg">
          <span>${item.name}</span>
        </div>
        <div class="price">$${item.price}.00 </div>
        <div class="quantity">${item.inCart} </div>
        <div class="total">$${item.inCart * item.price}.00 </div>
      </div>`;
    });
  }
}

2. Adjust Your CSS for Proper Row and Column Alignment #

We'll add styles for the new .product-row container, fix the width of each column to match your header, and clean up some existing styles:

Modified CSS:

/* Fixed typo: .conatiner → .container */
.container, .products-container{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:50px;
  padding-bottom:100px;
}
.products-container {
  max-width:650px;
  justify-content:space-around;
  margin:0 auto;
  margin-top:50px;
}
.product-header{
  width:100%;
  max-width:650px;
  display:flex;
  justify-content:flex-start;
  border-bottom:4px solid lightgrey;
  margin:0 auto;
}
.product-title{
  width:45%;
}
.price{
  width:15%;
  display:flex;
  align-items:center;
}
.quantity{
  width:30%;
  display:flex;
  align-items:center;
  border-bottom:1px solid lightgrey;
}
.total{
  width:10%;
  display:flex;
  align-items:center;
  border-bottom:1px solid lightgrey;
}

/* New style for each item row */
.product-row {
  width:100%;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid lightgrey;
}

/* Adjust .product to fit its column */
.product{
  width:45%;
  display:flex;
  align-items:center;
  gap:10px; /* Adds space between image and product name */
}

/* Make sure images don't break the layout */
.product img {
  width: 80px; /* Adjust this size to fit your design */
  height: auto;
}

Why This Works: #

• The .product-row container acts as a flex container for each full item, forcing each entry to take up its own row.
• Each column (.product, .price, etc.) has the same width as your header columns, so everything lines up perfectly.
• We fixed the typo in .conatiner (now .container) to avoid unexpected layout issues.
• Added a gap to the .product div to space out the image and product name nicely.

Now when you load your cart, each item will be on its own row, with the image/title, price, quantity, and total aligned exactly under their respective headers!

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