时间戳

首页 > 解决方案 > 将每个文本与其各自的图像正确对齐

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

问题描述

我想制作一个鱼的列表，它们各自的描述与它们的图像一致。如您所见，“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;
}

这是结果

结果

标签： htmlcss

解决方案

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

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>

推荐阅读