28112 sujets

CSS et mise en forme, CSS3

Float:left ou inline-block ?

bonjour,

Je révise doucement mes notions rouillées de CSS.

J'essaie de faire un positionnement assez simple, et que cela soit responsive.

Objectif recherché :
Avoir une grosse image à gauche et des blocs à droite.
Blocs de droite : composés d'une liste de petites images, avec du texte à droite, qui ne passe pas en dessous des petites images.

J'ai choisi inline-block plutôt que float, même si je ne suis pas très familier de cette méthode.

voici le problème :
upload/54012-Editfiddle.jpg

voici le code utilisé :
https://jsfiddle.net/adrien5555/rzeh5qso/

merci pour votre aide sur inline-block ou vos aiguillages !
Adrien
merci Julie,

après lecture, je suppose que dans mon cas tu ne me suggères pas le 'spacer' mais le margin-left:X%

OK pour faire cela avec des floats+margin, juste :
- est-ce responsive ? j'ai du mal à le vérifier...(newbie here)
- ce n'est pas valable avec des inline-blocks... si ?
Modifié par adrien5555 (01 Sep 2015 - 22:28)
bonsoir,

selon ton image :
le plus simple ou flexible(en) est float sur le premier élément et un contexte de formatage assuré sur le second.
http://codepen.io/anon/pen/ojgvgy

Si chaque élément a une largeur connue, inline-block peut aussi convenir
http://codepen.io/anon/pen/medLLG

En gros, il n'y jamais vraiment une technique meilleur qu'une autre, mais des choix selon le contexte, l'effet attendu et l'inter compatibilité.
Modifié par gc-nomade (02 Sep 2015 - 19:56)
bonjour Julie et gc,

merci pour vos réponses très utiles (que j'ai mis un peu de temps à bien lire !)

@Julie : Très intéressante notion, merci ! Et en suivant le lien de la demo (ici), on voit que dans l'exemple "BFC with inline-block (large content)" , le contenu passe bel et bien en dessous de l'élément flottant...

Je ne comprends pas bien pourquoi les inline-blocks réagissent comme ca, mais j'utiliserai une autre propriété pour avoir un contexte de formatage !

@gc-nomade : Merci pour le code.... c'est bien l'effet recherché. Juste :
- dans ton exemple1, comprends pas pourquoi le texte se met à droite des petites images 45x45, qui ne sont ni en float, ni en inline-block (comme dans l'exemple2)....

- par rapport à tes 2 codes, sur mobile, pour que le bloc UL passe en dessous de la grande image 450x450, la seule solution est bien de mettre les 2 gros blocs frères (IMG et UL) en float ou en inline-blocks, n'est ce pas ?


-Codepen est super bien !
Sujet clos
Aller à