Je configure des cartes HTML. Ils doivent tous avoir la même hauteur, mais non seulement cela, j'ai besoin des titres à l'intérieur des cartes pour avoir la même hauteur que la description commence toujours au même point, quelle que soit la longueur de titre. Voici un lien de Codepen avec le problème:
https://codepen.io/anon/pen/ Kljxyx p>
p>
<li class="list-item">
<div class="list-content">
<h2>This title is way longer than the rest, yet I need the rest to be the same height so the paragraph starts at the same point</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.</p>
<a href="">Link</a>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
<a href="">Link</a>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium.</p>
<a href="">Link</a>
</div>
</li>
</ul> 3 Réponses :
Vous pouvez utiliser le troisième paramètre de Notez que vous voudrez peut-être régler la hauteur de vos éléments pour l'adapter. p> p> flex code> pour contrôler ceci, avec, par exemple, flex: 0 0 60% code> sur le H2 code> Élément.
<li class="list-item">
<div class="list-content">
<h2>This title is way longer than the rest, yet I need the rest to be the same height so the paragraph starts at the same point</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.</p>
<a href="">Link</a>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
<a href="">Link</a>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium.</p>
<a href="">Link</a>
</div>
</li>
Le titre doit toujours être court.Update votre conception, demandez à votre rédacteur de contenu de mettre à jour cela.
Si l'alignement n'est que la préoccupation que vous pouvez essayer de suivre, mais le titre ne sera pas affiché complètement.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
<li class="list-item">
<div class="list-content">
<h2>This title is way longer than the rest, yet I need the rest to be the same height so the paragraph starts at the same point</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.</p>
<a href="">Link</a>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
<a href="">Link</a>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium.</p>
<a href="">Link</a>
</div>
</li>
</ul>Merci, j'ai aussi pensé à cela aussi, mais j'espérais qu'il y avait une façon qui n'impliquait pas JS.
Je suggère de tester une affaire avec beaucoup de cartes et de titre Max en dehors de la vue de la page (le navigateur calculerait-il la hauteur de titre la plus longue à 0 et a mal calculé la hauteur maximale?)
Les deux autres paragraphes commenceraient donc au bas de la carte même si le titre est une ligne? : / Même si vous peut , je ne suis pas sûr de vous Devrait faire ce que vous demandez. Voir XY Problème .
@staltheninja La quantité de texte dans mon exemple n'est qu'une exagération de prouver le point, mais normalement, le titre serait un ou deux lignes plus grand, et j'aimerais que la description commence au même point de chaque carte.
Il y a aucune méthode CSS pour aligner les éléments Ne partagez pas un parent.