28111 sujets

CSS et mise en forme, CSS3

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

Bonjour,
J'aimerais aligner des éléments conteneurs sur une ligne, en se basant sur un élément qu'ils contiennent.
Dans l'exemple (simplifié) qui suit, il faudrait que les <hr /> soient alignées, quel que soit le contenu avant et après dans le conteneur.
#main {
  width: 100%;
}
div.container {
  display: inline-block;
  width: 120px;
  border: 1px solid black;
  margin: 5px;
  vertical-align: middle;
}


<div id="main">
  <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>

https://jsfiddle.net/goony/fevkx04h/32/

Peut-être que ce n'est pas possible "simplement". J'ai essayé différentes pistes, mais je n'arrive à rien... en même temps, j'ai pas tout compris ce que je lisais !

Si vous aviez une piste, voire une solution, j'en serai ravi.
Merci d'avance
Modifié par goony (24 Mar 2020 - 19:53)
Modérateur
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. Smiley lol
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 Smiley biggrin

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)
Sujet clos
Aller à