javascript - 如何使 html 卡片对齐到行和列中？

Question

我在这个链接找到了我想用于网站的卡片设计:https://codepen.io/virgilpana/pen/RNYQwB

当我将 html、css 和 js 添加到我的网站时，其中多个卡片需要在行和列中彼此相邻对齐，这些卡片似乎只是堆叠在一起。如何编辑代码以使它们在行和列中对齐？

这里是卡片的相关代码:

#make-3D-space {
  position: relative;
  perspective: 800px;
  width: 340px;
  height: 500px;
  transform-style: preserve-3d;
  transition: transform 5s;
  position: absolute;
  top: 80px;
  left: 50%;
  margin-left: -167px;
}

#product-front,
#product-back {
  width: 335px;
  height: 500px;
  background: #fff;
  position: absolute;
  left: -5px;
  top: -5px;
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}

#product-back {
  display: none;
  transform: rotateY( 180deg);
}

#product-card.animate #product-back,
#product-card.animate #product-front {
  top: 0px;
  left: 0px;
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}

#product-card {
  width: 325px;
  height: 490px;
  position: absolute;
  top: 10px;
  left: 10px;
  overflow: hidden;
  transform-style: preserve-3d;
  -webkit-transition: 100ms ease-out;
  -moz-transition: 100ms ease-out;
  -o-transition: 100ms ease-out;
  transition: 100ms ease-out;
}

div#product-card.flip-10 {
  -webkit-transform: rotateY( -10deg);
  -moz-transform: rotateY( -10deg);
  -o-transform: rotateY( -10deg);
  transform: rotateY( -10deg);
  transition: 50ms ease-out;
}

div#product-card.flip90 {
  -webkit-transform: rotateY( 90deg);
  -moz-transform: rotateY( 90deg);
  -o-transform: rotateY( 90deg);
  transform: rotateY( 90deg);
  transition: 100ms ease-in;
}

div#product-card.flip190 {
  -webkit-transform: rotateY( 190deg);
  -moz-transform: rotateY( 190deg);
  -o-transform: rotateY( 190deg);
  transform: rotateY( 190deg);
  transition: 100ms ease-out;
}

div#product-card.flip180 {
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
  transition: 150ms ease-out;
}

#product-card.animate {
  top: 5px;
  left: 5px;
  width: 335px;
  height: 500px;
  box-shadow: 0px 13px 21px -5px rgba(0, 0, 0, 0.3);
  -webkit-transition: 100ms ease-out;
  -moz-transition: 100ms ease-out;
  -o-transition: 100ms ease-out;
  transition: 100ms ease-out;
}

.stats-container {
  background: #fff;
  position: absolute;
  top: 386px;
  left: 0;
  width: 265px;
  height: 300px;
  padding: 27px 35px 35px;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}

#product-card.animate .stats-container {
  top: 272px;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}

.stats-container .product_name {
  font-size: 22px;
  color: #393c45;
}

.stats-container p {
  font-size: 16px;
  color: #b1b1b3;
  padding: 2px 0 20px 0;
}

.stats-container .product_price {
  float: right;
  color: #48cfad;
  font-size: 22px;
  font-weight: 600;
}

.image_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #48daa1;
  opacity: 0;
}

#product-card.animate .image_overlay {
  opacity: 0.7;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}

.product-options {
  padding: 2px 0 0;
}

.product-options strong {
  font-weight: 700;
  color: #393c45;
  font-size: 14px;
}

.product-options span {
  color: #969699;
  font-size: 14px;
  display: block;
  margin-bottom: 8px;
}

#view_details {
  position: absolute;
  top: 112px;
  left: 50%;
  margin-left: -85px;
  border: 2px solid #fff;
  color: #fff;
  font-size: 19px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  padding: 10px 0;
  width: 172px;
  opacity: 0;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}

#view_details:hover {
  background: #fff;
  color: #48cfad;
  cursor: pointer;
}

#product-card.animate #view_details {
  opacity: 1;
  width: 152px;
  font-size: 15px;
  margin-left: -75px;
  top: 115px;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}

div.colors div {
  margin-top: 3px;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  float: left;
}

div.colors div span {
  width: 15px;
  height: 15px;
  display: block;
  border-radius: 50%;
}

div.colors div span:hover {
  width: 17px;
  height: 17px;
  margin: -1px 0 0 -1px;
}

div.c-blue span {
  background: #6e8cd5;
}

div.c-red span {
  background: #f56060;
}

div.c-green span {
  background: #44c28d;
}

div.c-white span {
  background: #fff;
  width: 14px;
  height: 14px;
  border: 1px solid #e8e9eb;
}

div.shadow {
  width: 335px;
  height: 520px;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: none;
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
  background: -o-linear-gradient(right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
  background: -moz-linear-gradient(right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
  background: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
}

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>

<a id="view-code" href="https://codepen.io/virgilpana/pen/RNYQwB" target="_blank">VIEW CODE</a>

<div id="make-3D-space">
  <div id="product-card">
    <div id="product-front">
      <div class="shadow"></div>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt.png" alt="" />
      <div class="image_overlay"></div>
      <div id="view_details">View details</div>
      <div class="stats">
        <div class="stats-container">
          <span class="product_price">$39</span>
          <span class="product_name">Adidas Originals</span>
          <p>Men's running shirt</p>

          <div class="product-options">
            <strong>SIZES</strong>
            <span>XS, S, M, L, XL, XXL</span>
            <strong>COLORS</strong>
            <div class="colors">
              <div class="c-blue"><span></span></div>
              <div class="c-red"><span></span></div>
              <div class="c-white"><span></span></div>
              <div class="c-green"><span></span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

multiple of these cards need to be aligned beside one another in rows and columns

我本来打算写一个 CSS Grid 的例子，但是如果你有未知数量的卡片要在简单的行和列中对齐，CSS Flexbox 是这种布局的完美工具。

工作示例:

body {
background-color: rgb(63, 63, 255);
}

.card-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
max-width: 496px;
margin: 0 auto;
padding: 9px;
background-color: rgb(95, 95, 255);
}

.card {
width: 100px;
height: 140px;
margin: 12px;
background-color: rgb(255, 255, 255);
box-shadow: 0 0 12px rgb(63, 63, 63);
}

<div class="card-container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>