[Résolu] Aligner des div verticalement en fonction d'un élément conten

bonsoir,

grid/flex (ou javascript au plus proche) pourrait être une solution, mais il faudra que chaque portion de texte soit dans un conteneur. Le hr n'est pas nécessaire si il ne s'agit que d'un effet visuel (border-bottom).

base possible :

<div class="container">
    <p>Lorem ipsum dolor sit amet,consectetur</p>
     <p>adipiscing elit. Sed non risus.</p>
  </div>

est ce une possibilité ?

MAj (aléatoire) avec grid https://jsfiddle.net/6qbwo03L/ ...
Modifié par gcyrillus (24 Mar 2020 - 21:31)

Merci pour la piste, je vais continuer à essayer de comprendre les flex et grid. Par contre, je veux vraiment éviter de passer par du Javascript pour faire la mise en page.

L'exemple avec le texte et les hr était pour simplifier la question, peut-être un peu trop.
Je peux bien sûr remettre des div autour des éléments quand c'est nécessaire, mais j'essaie d'en imbriquer le moins possible.

Je recommence avec un exemple plus concret, mais quand même simplifié.

<div class="article">
	<div class="container">
		<a href="#"><img src="visuel.jpg" alt="visuel" /></a>
	</div>
	<a href="#"><img src="acheter.png"  alt="acheter" /></a><br />
	<div class="infos">
			<span class="titre">Mon produit</span>
			<span class="description">Lorem ipsum dolor sit amet,consectetur</span>
	</div>
</div>

div.article{
	display: inline-block;
	width: 180px;
	text-align: center;
}
div.article .container {
	position: relative;
}
div.article .container img{
	max-width: 160px;
	max-height: 200px;	
}

Les dimensions de l'image de visuel et la longueur du texte de description sont différents pour chaque article.
Lorsqu'il y a plusieurs articles côte à côte, j'aimerais que tous les boutons d'achat soient sur la même ligne.
Modifié par goony (24 Mar 2020 - 21:59)

Je viens de voir ton exemple sur jsfiddle, c'est exactement ça. Je vais pouvoir adapter.
Merci beaucoup

NB : pour que l'exemple perdure

<div id="main">
  J'aimerais que les éléments suivants soient alignés verticalements par rapport à l'élément HR qu'elles contiennent.<br />
  <div class="container">
    Lorem ipsum dolor sit amet,consectetur
    <hr />adipiscing elit. Sed non risus.
  </div>
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
    <hr />non risus. Suspendisse le
  </div>
  <div class="container">
    g elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing
    <hr />nec,
  </div>
  <div class="container">
    se lectus tortor, dignissim sit amet,
    <hr /> adipiscing nec, ultricies sed, dolor. Cras
  </div>
  <div class="container">
    Lorem ipsum dolor sit amet. Suspendisse lectus tortor, dignissim
    <hr />sit amet, adipiscing nec, ultricies sed, dolor. Cras
  </div>
  <div class="container">
    adipiscing
    <hr />nec, ultricies sed, dolor. Cras
  </div>
  <div class="container">
    Sed non risus. Suspendisse lectus tortor,
    <hr />dignissim sit amet, adipiscing nec
  </div>

</div>

#main {
  width: 100%;
}
hr {width:100%;}
div.container {
  display: inline-grid;
  grid-template-rows: 1fr auto 1fr;
  width: 120px;
  border: 1px solid black;
  margin: 5px;
  vertical-align: middle;
}

Modifié par goony (24 Mar 2020 - 23:04)

gcyrillus a écrit :

MAj (aléatoire) avec grid https://jsfiddle.net/6qbwo03L/ ...

Très joli usage de Grid Layout, bravo !

Je me rappelle d'une solution qui se rapproche beaucoup, dans un article de Benjamin de Cock datant de... 2008 (sans Grid Layout forcément)
https://www.alsacreations.com/tuto/lire/1340-Mise-en-page-CSS-avancee-grace-a-la-propriete-display.html
Modifié par Raphael (25 Mar 2020 - 17:34)