我怎样才能制作一张像这样的 HTML/CSS 响应式卡片

Question

我想制作一张完全响应式的卡片（图 1），并且可以支持位于其左侧的两张卡片，在我正在构建的网站上总共三张卡片（图 2）。我已经在没有响应能力的情况下对此进行了编码，但我正在努力获得响应卡。任何帮助都很棒，谢谢！

JSFiddle：https://jsfiddle.net/brax/2o01k7ps/

.alignment2 {
  display: flex;
  justify-content: space-between;
  column-gap: 20px;
  padding-bottom: 6%;
}

.container {
  padding: 2px 16px;
}

.card2 {
  box-shadow: 0 5px 13px 0 #000;
  border-radius: 15px;
  background-color: #121212;
  border-color: #121212;
  height: 188px;
}

.card2:hover {
  box-shadow: 0 8px 16px 0 000;
}

.card2 img {
  width: 50%;
  float: left;
  border-radius: 15px 0px 0px 15px;
  margin-right: 20px;
  display: inline;
}

.card2 h3 {
  display: inline;
}

.card2 h4 {
  display: inline;
  font-size: 24px;
  color: white;
}

.card2 p {
  display: inline;
  font-size: 18px;
  color: white;
  padding-top: 20px;
}

.card2 .link-a {
  display: inline;
  margin-top: 35px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}

<div class="alignment2">
  <div class="card2">
    <img src="https://dummyimage.com/300x300" alt="Avatar">
    <div class="container">
      <h4>Lorem Ipsum</h4>
      <br>
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor</p>
      <br>
      <br>
      <p class="link-a" style="font-size: 15px;"><a href="link">CTA Link</a></p>
    </div>
  </div>
  <div class="card2">
    <img src="https://dummyimage.com/300x300" alt="Avatar">
    <div class="container">
      <h4>Lorem Ipsum</h4>
      <br>
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor</p>
      <br>
      <br>
      <p class="link-a" style="font-size: 15px;"><a href="link">CTA Link</a></p>
    </div>
  </div>
</div>

图1

图2

Answer 1

要使其响应，请首先将

width: 50%

上的

img

替换为

height: 100%;

，以便图像在卡片上垂直拉伸。

然后在

flex-wrap: wrap;

中添加

.alignment2

，并将

column-gap

替换为

gap

，这样卡片在成行显示时就有间隙。

此外，将

flex: 1 1 calc(33.333% - 20px);

添加到

.card2

，以便它们并排显示在一行中，中间有一点间隙。

最后，使用“媒体查询”，更改较小屏幕的

flex

，以便随着屏幕变小，彼此相邻的卡片数量会减少。

这是更新后的页面（我添加了第三张卡）：

.alignment2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding-bottom: 6%;
}

.container {
  padding: 2px 16px;
}

.card2 {
  flex: 1 1 calc(33.333% - 20px);
  /* Three cards per row */
  box-shadow: 0 5px 13px 0 #000;
  border-radius: 15px;
  background-color: #121212;
  border-color: #121212;
  height: 188px;
}

.card2:hover {
  box-shadow: 0 8px 16px 0 #000;
}

.card2 img {
  /*width: 50%;*/
  height: 100%;
  float: left;
  border-radius: 15px 0px 0px 15px;
  margin-right: 20px;
  display: inline;
}

.card2 h3 {
  display: inline;
}

.card2 h4 {
  display: inline;
  font-size: 24px;
  color: white;
}

.card2 p {
  display: inline;
  font-size: 18px;
  color: white;
  padding-top: 20px;
}

.card2 .link-a {
  display: inline;
  margin-top: 35px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}

@media screen and (max-width: 1200px) {
  .card2 {
    flex: 1 1 calc(50% - 20px);
    /* Two cards per row */
  }
}


/* Responsive design */

@media screen and (max-width: 900px) {
  .card2 {
    flex: 1 1 100%;
    /* One card per row */
  }
}

<div class="alignment2">
  <div class="card2">
    <img src="https://dummyimage.com/300x300" alt="Avatar">
    <div class="container">
      <h4>Lorem Ipsum</h4>
      <br>
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor</p>
      <br>
      <br>
      <p class="link-a" style="font-size: 15px;"><a href="link">CTA Link</a></p>
    </div>
  </div>
  <div class="card2">
    <img src="https://dummyimage.com/300x300" alt="Avatar">
    <div class="container">
      <h4>Lorem Ipsum</h4>
      <br>
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor</p>
      <br>
      <br>
      <p class="link-a" style="font-size: 15px;"><a href="link">CTA Link</a></p>
    </div>
  </div>
  <div class="card2">
    <img src="https://dummyimage.com/300x300" alt="Avatar">
    <div class="container">
      <h4>Lorem Ipsum</h4>
      <br>
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor</p>
      <br>
      <br>
      <p class="link-a" style="font-size: 15px;"><a href="link">CTA Link</a></p>
    </div>
  </div>
</div>

.card2:hover

也有错误，将

000

更改为

#000