html创建带有图片的且并排的多个卡片如何调整卡片的大小

您可以使用CSS中的flexbox来创建带有图片的多个卡片并排显示，并且可以通过设置卡片的宽度和高度来调整卡片的大小。以下是一个示例代码，其中包含两个卡片并排显示，每个卡片都包含一个图像和一些文本。

HTML代码：

<div class="card-container">
  <div class="card">
    <img src="image1.jpg" alt="Image 1">
    <h3>Card 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="card">
    <img src="image2.jpg" alt="Image 2">
    <h3>Card 2</h3>
    <p>Nullam ultricies libero sit amet velit lacinia, vel malesuada est bibendum.</p>
  </div>
</div>

CSS代码：

.card-container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  width: 300px; /* 设置卡片的宽度 */
  height: 400px; /* 设置卡片的高度 */
  margin: 10px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  padding: 10px;
  text-align: center;
}

.card img {
  max-width: 100%;
  height: auto;
}

在这个示例中，我们使用了flexbox布局来将两个卡片并排显示。`.card-container`类设置为`display: flex`和`flex-wrap: wrap`，这表示卡片将在一行上排列，并在需要时换行。`.card`类设置卡片的宽度和高度，并添加了一些边框、阴影和内边距来使它们看起来像卡片。`.card img`类设置图像的最大宽度为100%，以确保它不会溢出卡片。您可以根据需要调整这些样式来适应您的布局和设计需求。