Блог

Главная - Вопросы по программированию - я получаю некоторые данные из локального хранилища в новую корзину страниц, и в ней отображаются все данные, но в макете, так, как я хочу

я получаю некоторые данные из локального хранилища в новую корзину страниц, и в ней отображаются все данные, но в макете, так, как я хочу

#javascript #html #css #layout

Вопрос:

Пожалуйста, помогите мне ….я слежу за видео на YouTube, и я создаю корзину, и я получаю данные из локального хранилища, и я хочу показать данные следующим образом: «изображение книги» и название должны быть под «НАЗВАНИЕМ» цена под ЦЕНОЙ Количество Под количеством и итого Под ИТОГОМ… Но я выставляю вещи друг под другом… как показано на прикрепленном изображении, введите описание изображения здесь, когда я использую свойство Display:flex; я получаю все результаты в одной строке, например, если у меня на 2,0 r больше результатов, я хочу, чтобы они были в отдельной строке….Пожалуйста, помогите

Это мой Html

 <body>
  <form id="form1" runat="server">
    <header>
      <div class="overlay">
        <nav>
          <h2>shop</h2>
          <ul>
            <li class="nav-item">                              
              <asp:LinkButton ID="btnCart" class="btncart" runat="server">CART<span class="cartspan" style="color:lightslategrey"> 0</span></asp:LinkButton>
            </li>
          </ul>
        </nav>
      </div>
    </header>
    <div class="products-container">
      <div class="product-header">
        <h5 class="product-title"> TITLE</h5>
        <h5 class="price">PRICE</h5>
        <h5 class="quantity">QUANTITY</h5>
        <h5 class="total">TOTAL</h5>
      </div>
      <div class="products"></div>
    </div>
  </form>
  <script src="MyCustomJS/AddToCart.js"></script>
</body>

это стиль

 .conatiner,.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%;
  border-bottom:1px solid lightgrey;
  display:flex;
  align-items:center;
}
.total{
  width:10%;
  border-bottom:1px solid lightgrey;
  display:flex;
  align-items:center;
}
.product{
  width:45%;
  max-width:650px;
  display:flex;
  justify-content:space-around;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid lightgrey;
}

Это одно из применений JS

 function displayCart()
{
    let cartItems = localStorage.getItem('ProductsinCart');
    cartItems = JSON.parse(cartItems);
    let productContainer = document.querySelector(".products")
    if(cartItems amp;amp; productContainer)
    {
        productContainer.innerHTML = '';
        Object.values(cartItems).map(item => {
          productContainer.innerHTML  = `
            <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} </div>`
        });
    }
}

Комментарии:

1. .price !==pricce так <div class="pricce"> что проигнорируем это правило css

2. да, я изменил его на цену, но проблема еще не решена

3. .products-container установлено flex wrap значение, но я полагаю, что свойство по умолчанию column равно, поэтому наследование, вероятно, играет определенную роль и заставляет эти элементы вставляться в макет столбца.

Ответ №1:

я изменился

 .products{
      width:100%;
        max-width:650px;
        display:flex;
        justify-content:flex-start;
        margin:0 auto;
        border-bottom:1px solid lightgrey;
    }
    .product{
        width:45%;
    }

и <div class="price">$${item.price}.00 </div>

Комментарии:

1. спасибо за ваш ответ, но, брат, при этом все данные строк объединяются в одну строку ….

2. вам нужно создать рабочий фрагмент для этого, если вам нужен быстрый результат.

Метки: , , , ,