28172 sujets

CSS et mise en forme, CSS3

salut à tous,

Une petite question dont je ne trouve pas la solution, je dois rate quelquechose mais ca me vient pas du coup je me permet de faire un petit post.

Sur un de mes site (http://www.toutablocs.com/fr/ c'est la partie en dessous le slider ou il y a la description avec deux photos), sur une même ligne je souhaite avoir trois div : une photo a gauche, un texte au milieu et une photo a droite.

L'idée est de combler toute la largeur de l’écran sans marge, du coup j'ai mis des valeurs en % de largeur pour chaque colonne, qui change en fonction de la taille ecran.

J'ai un div qui contien trois autres div :

J'ai un float right pour la photo de droite et un guache pour celle de gauche, pour le texte j'ai mis overflow:hidden pour qu'il prenne la place.

Pour les photos, j'utilise object-fit: cover; afin qu'elle s'adapet en fonction de la taille, meme si forcement ca crop dedans.

Pour l’instant je n'ai pas réussi du coup j'ai mis un hauteur fixe qui marche pas trop mal (sauf certaines taille d"ecran) mais pour bien faire j'aimerai que la hauteur des trois div s'adapte toute seule.

Ca marche a peu pres mais c'est pas propre sur le code je trouve.

Ma question ou je n'ai pas réussi : en fait je souheterai que la taille des trois div s'adapte en fonction de la taille du texte car lorsqu’on réduit la taille de l'ecran, le texte s'etale en hauteur.

Mon probleme : les div avec les photo a gauche et a droite ne prennent pas la taille du div qui les contient ni celle du div texte si je met height 100%....

Comment faire ?

J'espere être clair ?

Merci de votre aide a bientot
Bonjour. Vous pouvez vous en tirez de manière élégante avec une déclaration flexbox sur le conteneur (qui sous entend la règle par défaut `align-items: stretch`). Les boites s'alignerons sur celle qui a le plus de contenu.

Exemple : ColdePen