使用display:flex实现卡片横向排列失败问题求助

你的卡片上下堆叠不是图片尺寸的问题，核心问题出在HTML结构上：你给每张卡片都单独套了一个.card-container容器，而.card-container本身是块级元素（即便设置了flex，单个容器里只有一个子元素时，容器仍会占满一行），所以两个.card-container会上下排列，导致卡片堆叠。

解决步骤 #

1. 合并容器：把所有<div class="card">放到同一个.card-container中，这样flex布局才能作用于所有卡片，实现横向排列。
2. 你的CSS代码本身没有问题，图片设置width:100%是正确的，会自适应卡片宽度，不会影响flex布局。

修正后的完整代码 #

CSS（无需修改） #

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background-color: #f0f0f0;
}

.card-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 100px;
}

.card {
  width: 325px;
  background: #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 2px 4px rgb(0, 0, 0, 0.2);
  margin: 20px;
}

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

.card-content {
  padding: 16px;
}

.card-content h3 {
  font-size: 28px;
  margin-bottom: 8px;
}

.card-content p {
  color: #666;
  font-size: 15px;
  line-height: 1.3;
}

.card-content .btn {
  display: inline-block;
  padding: 8px 16px;
  background-color: #333;
  text-decoration: none;
  border-radius: 4px;
  margin-top: 16px;
  color: #fff;
}

HTML（修改结构） #

<div class="card-container">
  <div class="card">
    <img src="images/nike.jpg" alt="nikeshoes" class="card-image" />
    <div class="card-content">
      <h3>Nike Shoes</h3>
      <p>
        Lorem ipsum dolor...
      </p>
      <a href="" class="btn">Read More!</a>
    </div>
  </div>

  <div class="card">
    <img src="images/nike.jpg" alt="nikeshoes" class="card-image" />
    <div class="card-content">
      <h3>Nike Shoes</h3>
      <p>
        Lorem ipsum dolor...
      </p>
      <a href="" class="btn">Read More!</a>
    </div>
  </div>
</div>

效果说明 #

修改后，.card-container作为flex容器，里面的所有.card会成为flex子元素，空间足够时横向排列，空间不足时自动换行（因设置了flex-wrap: wrap），完美实现卡片横向布局效果。

内容的提问来源于stack exchange，提问作者Awais Mirza