在响应式网格布局中重新对齐 div 内容

Question

我有这张卡片。这些卡片下面有图像和文字。当浏览器宽度减小到 1000 像素时，卡片将更改为堆叠格式并拉伸 100% 的屏幕宽度。图像应移动到文本的左侧。我不太明白的是文本对齐在图像的右侧，如下所示：

对此：

#main {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  width: 290px;
  border: 1px solid #f2f0f0;
  background-color: yellow;
}

.card-content {
  background-color: yellow;
  padding: 10px;
}

.card-image {
  height: 290px;
}


@media (max-width: 1000px) {
    .card {
    width: 100%;
  }
  .card-image {
    float: left;
  }
  .card-content {
    float: left;
  }
}

<div id="main">
  <div class="card">
      <div class="card-image">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Uranus_Voyager2_color_calibrated.png/290px-Uranus_Voyager2_color_calibrated.png">
    </div>
    <div class="card-content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida sagittis eleifend. Morbi nec neque cursus, porta nulla nec, lacinia est. Integer vehicula nibh mauris, ut sollicitudin eros efficitur et. Proin eget auctor nisl. Maecenas enim libero, tristique a ornare et, lobortis ut dui. Donec eu mi erat.
    </div>
  </div>
  
  <div class="card">
      <div class="card-image">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Uranus_Voyager2_color_calibrated.png/290px-Uranus_Voyager2_color_calibrated.png">
    </div>
    <div class="card-content">
      Lorem ipsum
    </div>
  </div>
</div>

Answer 1

浮动是错误的方法。相反，将每张卡片设置为弹性盒，然后在媒体查询中将

flex-direction

从

column

更改为

row

。

#main {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  width: 290px;
  border: 1px solid #f2f0f0;
  background-color: yellow;
  display: flex;
  flex-direction: column;
}

.card-content {
  background-color: yellow;
  padding: 10px;
}

.card-image {
  height: 290px;
}

@media (max-width: 1000px) {
  .card {
    width: 100%;
    flex-direction: row;
  }
}

<div id="main">
  <div class="card">
      <div class="card-image">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Uranus_Voyager2_color_calibrated.png/290px-Uranus_Voyager2_color_calibrated.png">
    </div>
    <div class="card-content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida sagittis eleifend. Morbi nec neque cursus, porta nulla nec, lacinia est. Integer vehicula nibh mauris, ut sollicitudin eros efficitur et. Proin eget auctor nisl. Maecenas enim libero, tristique a ornare et, lobortis ut dui. Donec eu mi erat.
    </div>
  </div>
  
  <div class="card">
      <div class="card-image">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Uranus_Voyager2_color_calibrated.png/290px-Uranus_Voyager2_color_calibrated.png">
    </div>
    <div class="card-content">
      Lorem ipsum
    </div>
  </div>
</div>