28172 sujets

CSS et mise en forme, CSS3

Bonjour !

Désolé pour le titre à la noix (je n'ai pas trouvé mieux).

Je me prends la tête sur une bétise (peut-être), et je ne trouve pas de solution propre.

Soit deux divs placés l'un à côté de l'autre, via les classes KNACSS (que j'ai testé et adopté!) suivantes : "w50 col left"

Le premier contient deux paragraphes, suivis d'une image,
et le second contient un paragraphe suivi d'une image.
Les images des deux colonnes ont exactement la même taille.


p          p
p          img
img


Le problème (et j'avoue qu'il n'a pas tord), est que le client souhaite que les deux images soit alignées verticalement (sur une même droite horizontale).


p          p
p          
img       img


Si je déplace les images dans des divs séparés en dessous des divs du paragraphe, je perds le comportement "responsive" puisque sur les petites largeurs d'écrans, les images vont se retrouver en dessous des paragraphes.


p
p

p          

img

img


Au lieu d'avoir ceci :


p
p
img

p          
img


Désolé pour cette question idiote, mais je tourne franchement en rond à trouver une solution propre.

D'avance merci pour vos lumières !
Si tu connais la taille de ton image à l'avance, tu peux faire un padding-bottom:[hauteur_image]px et positionner ton image en position:absolute par rapport à son parent... bottom:0;left:0;

Si tu ne connais pas la taille de l'image, alors je ferais un conteneur supplémentaire pour enrober les X-paragraphes, display:table-cell;vertical-align:top;, un autre pour enrober l'image, display:table-cell;vertical-align:bottom, le papa de tout ça en display:table-row;vertical-align:top;

Enfin à tester...

Tchô
Je viens déjà de corriger une erreur tellement énorme que je ne l'avais pas vue : en remplacant les classes "w50 col left" par "w50 col".

En fait, je suis surtout entrain de me dire que (1) il serait temps que j'aille dormir (nuits blanches à gogo) et (2) que ce que je veux faire, finalement, se résumerait à un tableau à deux colonnes et deux lignes, et que je vois mal comment un tableau à deux-colonnes et deux lignes se transformerait en tableau à une colonne et 4 lignes quand la largeur de l'écran est trop petite.