Align each text correctly with It's respective image-CodePudding

I want to make a list of fish with their respective descriptions aligned with their image. As you can see, "Saumon" is roughly aligned with it's image, but "Truite" isn't at all, so much that it's with a wrong image. How can I align it correctly with all window sizes? Thank you in advance.

Here is my code

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

And here are the results

CodePudding user response：

You should post your code to have a specific answer. You could put the image and its description within the same parent div, you could use a table, etc. It depends on your current code.

CodePudding user response：

As I mention in the comment you need to use "grid layout".

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>