将每个文本与其各自的图像正确对齐

Question

我想列出一张鱼的清单，让它们的描述与它们的形象保持一致。正如你所看到的，"Saumon“与它的图像大致一致，但"Truite”根本就不是，所以它的图像是错误的。如何将其与所有窗口大小正确对齐？提前谢谢你。

以下是我的代码

    <img class="imgfish" src="/images/saumon.png" alt="Saumon" />
    <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>
    <img class="imgfish" src="/images/truite.png" alt="Saumon" />
    <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>

CSS

.imgfish {
  float: left;
  clear: left;
  width: 400px;
  padding-top: 0rem;
  border-radius: 15px;
  max-width: 40vw;
  margin: 30px;
}

.titlefish {
  margin-bottom: 1rem;
}

下面是结果

​

​

Answer 1

正如我在评论中提到的，你需要使用“网格布局”。

​

body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #container {
            display: grid; 
            grid-template-columns: 0.5fr 1fr; 
            grid-template-rows: 1fr 1fr 1fr; 
            gap: 0px 0px; 
            grid-template-areas: 
                "a b"
                "c d"
                "e f"; 
                row-gap: 5px;
                width: 80%;
                height: 100%;
        }
        img{
            max-width: 400px;
            max-height: 400px;
        }
        #container:nth-child(1){
            /*First Image*/
            grid-area: a;
        }
        #container:nth-child(2){
            /*Description of first image*/
            grid-area: b;
        }

 <div id="container">

    <img class="imgfish" src="https://images.unsplash.com/photo-1633885096653-53ea6830e77a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=687&q=80" alt="Saumon" />
    
    <div class="description">
        <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>

    
    <img class="imgfish" src="https://images.unsplash.com/photo-1633884941685-dd89adc11ab8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=687&q=80" alt="Saumon" />
    <div class="description">
        <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>

    <img class="imgfish" src="https://images.unsplash.com/photo-1633884941685-dd89adc11ab8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=687&q=80" alt="Saumon" />
    <div class="description">
        <h3 class="titlefish">Something else</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>

​

Answer 2

您应该发布您的代码以获得特定的答案。您可以将图像及其描述放在同一父div中，也可以使用一个表，等等。这取决于您当前的代码。