如何实现鱼类列表文本描述与对应图片在所有窗口尺寸下正确对齐

问题根源 #

你没有将每种鱼对应的「图片+标题+描述」作为独立排版单元处理，浮动元素的排版会受前面所有内容高度影响，就会出现图文错位、匹配错误的问题。另外注意你代码里鳟鱼的图片alt属性写错了，误写为了Saumon，可以顺便修正。

方案1：最小改动修复（保留原有float逻辑） #

第一步：修改HTML结构，给每种鱼的内容套独立容器

<!-- 鲑鱼单元 -->
<div class="fish-item">
  <img class="imgfish" src="/images/saumon.png" alt="鲑鱼" />
  <h3 class="titlefish">Saumon</h3>
  <p>
    Le saumon est un poisson gras à la chair rosée, de la même famille que la
    truite ou l'omble. Il nait et se reproduit en eau douce, mais vit dans
    l'océan. Il existe plus de 60 sortes de saumon et il a été le poisson le
    plus consommé sur terre depuis la préhistoire.
  </p>
</div>

<!-- 鳟鱼单元 -->
<div class="fish-item">
  <img class="imgfish" src="/images/truite.png" alt="鳟鱼" />
  <h3 class="titlefish">Truite</h3>
  <p>
    La truite est un poisson que l’on pêche dans les rivières et les lacs.
    Elle appartient à la famille de salmonidés qui comprend entre autres, le
    saumon, le touladi, l’omble chevalier. La truite est une excellente source
    d’acides gras omégas-3, reconnus pour limiter l’apparition de certains
    cancers et certaines maladies cardio-vasculaires.
  </p>
</div>

第二步：补充CSS规则，隔离每个单元的浮动排版

/* 新增单元规则，隔离浮动影响，保证每个单元独立排版 */
.fish-item {
  clear: both;
  overflow: auto;
  margin-bottom: 30px;
}

/* 原有CSS微调，避免边距重叠 */
.imgfish {
  float: left;
  width: 400px;
  padding-top: 0rem;
  border-radius: 15px;
  max-width: 40vw;
  margin: 0 30px 30px 0;
}

.titlefish {
  margin-top: 0;
  margin-bottom: 1rem;
}

方案2：更稳定的flex实现（全尺寸自适应，无浮动问题） #

如果不想处理浮动的兼容性问题，用flex布局的适配性更强，小屏幕下也会自动换行不会错乱：

对应HTML结构

<div class="fish-item">
  <img class="imgfish" src="/images/saumon.png" alt="鲑鱼" />
  <!-- 文字内容套独立容器 -->
  <div class="fish-desc">
    <h3 class="titlefish">Saumon</h3>
    <p>鲑鱼描述内容</p>
  </div>
</div>
<div class="fish-item">
  <img class="imgfish" src="/images/truite.png" alt="鳟鱼" />
  <div class="fish-desc">
    <h3 class="titlefish">Truite</h3>
    <p>鳟鱼描述内容</p>
  </div>
</div>

对应CSS

.fish-item {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
  flex-wrap: wrap; /* 小屏幕自动换行 */
}

.imgfish {
  width: 400px;
  max-width: 40vw;
  border-radius: 15px;
  flex-shrink: 0; /* 避免图片被挤压变形 */
}

.fish-desc {
  flex: 1;
  min-width: 280px; /* 控制文字最小宽度，小屏幕自动掉到图片下方 */
}

.titlefish {
  margin-top: 0;
  margin-bottom: 1rem;
}

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