主页 / 问题 / 1566104
Accepted
Nqweqweqwe
Asked:2024-02-13 16:12:23 +0000 UTC2024-02-13 16:12:23 +0000 UTC

css 3 和 html 5，如何按屏幕对产品卡进行排序？

  • 772

我margin在主结构中添加了卡片，但是复制它时，所有卡片都会向下移动，但我需要它们按顺序向左移动，如果没有空间，则在底部。如何实施？

.card {
  background-color: #eeeded;
  width: 175px;
  border-radius: 20px;
  padding: 20px 10px;
  box-shadow: 10px 10px 20px rgba(67, 64, 64, .4);
  margin: 80px 100px;
}

.card-img {
  border-radius: 11px;
  /*margin-right: 100px;*/
}

.card-title {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 501;
}

.card-description {
  font-size: 12px;
  font-weight: 300;
  margin-top: 20px;
}

.btn-keeper {
  margin-top: 20px;
  text-align: center;
}

.btn-add {
  /*padding: 7px 12px;*/
  /*margin-right: 500px;*/
  color: red;
  background-color: #EEEDEDFF;
  border-radius: 10px;
}

.btn-delete-from-cart {
  color: red;
  background-color: #EEEDEDFF;
  border-radius: 10px;
}

.btn-delete-from-cart:hover {
  color: red;
}

.btn-add:hover {
  color: red;
}
<div class="product-card">
  <!-- wrapper -->
  <div class="card">
    <img class="card-img" src="menu/6za700.jpg">
    <div class="card-title">6 за 700</div>
    <div class="card-description">3 крылышка, 3 стрипса. картошка фри, соус барбекью .кола 0,33. твистер с курей</div>
    <div class="btn-keeper">
      <a href="#" class="btn-delete-from-cart">
        <ion-icon name="remove-circle-outline"></ion-icon>
      </a>
      <a href="#" class="btn-add">
        <ion-icon name="add-circle-outline"></ion-icon>
      </a>
    </div>
  </div>
</div>

html

1 个回答

  1. Best Answer

    我决定这样，在主要的之后，我添加了div另一个div，我在其中放置了所有代码。

    • 0

相关问题