如何创建CSS卡？

Question

这个问题可能有点广泛。我正在尝试创建三张卡片和一个在它们上面的栏，如下所示：

橙色部分是图像，灰色部分是文本。

.blue-line {
  height: 100px;
  background-color: lightblue;
  margin-left: 10px;
  margin-right: 10px;
}

.card {
  height: 400px;
  width: 300px;
  background-color: grey;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 20px;
}

<div class="blue-line"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

Answer 1

您应使用FlexBox，如下所示：

.blue-line {
  height: 100px;
  background-color: lightblue;
  margin-left: 10px;
  margin-right: 10px;
}

.card {
  height: 400px;
  width: 300px;
  background-color: grey;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 20px;
}

.card-container {
  margin-left: 10px;
  margin-right: 10px;
  display: flex;
}

.img {
  height: 100px;
  width:100%;
  background: #febe8c;
}

<div class="blue-line"></div>
<div class="card-container">
  <div class="card">
      <div class="img">
      </div>
  </div>
  <div class="card">
      <div class="img">
      </div>
  </div>
  <div class="card">
      <div class="img">
      </div>
  </div>
</div>

---

容器和物品

初始化弹性框

.container {
  display: flex; /* or inline-flex */
}

订单

.item {
  order: <integer>; /* default is 0 */
}

Flex-grow

.item {
  flex-grow: <number>; /* default 0 */
}

---

  

详细了解Flex Box

Sources

Answer 2

下面的代码对于您来说应该可以。您可以使用img标签，也可以将图片制作为背景图片（可以的话）

.blue-line {
  height: 100px;
  background-color: lightblue;
  margin-left: 10px;
  margin-right: 10px;
}

.card {
  height: 400px;
  width: 300px;
  background-color: grey;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 20px;
}

.card-container {
  margin-left: 10px;
  margin-right: 10px;
  display: flex;
}
.img {
  height: 200px;
  width:100%;
  background: orange;
}

<div class="blue-line"></div>
<div class="card-container">
  <div class="card">
    <div class="img">
    </div>
        <h4>You can input your text here</h4>

  </div>
  <div class="card">
    <div class="img">
    </div>
    <h4>You can input your text here</h4>
  </div>
  <div class="card">
    <div class="img">
    </div>
        <h4>You can input your text here</h4>

  </div>
</div>