响应式网格布局中Div内容重新对齐问题

你当前用float实现横向布局的方式容易出现对齐混乱，改用Flexbox可以更稳定地达成目标效果：

修改后的CSS代码 #

#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;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 维持图片比例，避免拉伸变形 */
}

@media (max-width: 1000px) {
    .card {
        width: 100%;
        display: flex;
        align-items: flex-start; /* 图片与文本顶部对齐 */
    }
    .card-image {
        flex-shrink: 0; /* 固定图片宽度，防止被挤压 */
        width: 290px;
        height: auto; /* 自适应图片实际高度 */
    }
    .card-content {
        flex-grow: 1; /* 文本区域自动填充图片右侧剩余空间 */
        padding: 10px;
    }
}

关键调整说明 #

• 窄屏模式下给.card添加display: flex，将内部元素转为横向排列
• .card-image通过flex-shrink: 0锁定宽度，避免被文本挤压
• .card-content用flex-grow: 1实现宽度自适应，填满剩余空间
• 给图片设置object-fit: cover，保证图片在容器内比例正常

完整HTML代码 #

<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>

内容的提问来源于stack exchange，提问作者Daniel Williams