28111 sujets

CSS et mise en forme, CSS3

[RESOLU] Aligner horizontalement 3 div (y compris sur androïd ;-) )

Bonjour,

J'ai 

<div id="1" class="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
</div>

et je voudrais que les trois div intérieures soient alignées horizontalement
(pas question de changer les class, ce sont des div générées par le formulaire d'un CMS)
alors, j'ai trouvé des float right, left et none mais ici ..!?
Modifié par corbintheone (03 Jul 2015 - 14:41)
Modérateur
Bonjour,

J'ajouterais à la réponse de Jencal de ne pas oublier d'ajouter quelque-chose du genre
.a div+*{clear:left;}



Autrement l'utilisation de Flexbox est, sans jeu de mot, beaucoup plus flexible. Il y a 2 tutos sur Alsa (le site vert et gris et non la pochette rose Smiley cligne ) qui détaillent très bien le concept.

Par contre la rétro-compatibilité est limitée.

A parte sur la rétro-compatibilité. Nous sommes quand même en 2015, à se demander s'il a intérêt à continuer à s'adapter par exemple à IE6 ?!
Modérateur
Bonjour,

Greg_Lumiere a écrit :
Autrement l'utilisation de Flexbox est, sans jeu de mot, beaucoup plus flexible. Il y a 2 tutos sur Alsa (le site vert et gris et non la pochette rose Smiley cligne ) qui détaillent très bien le concept


Je partirai effectivement plus sur du Flexbox (http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html) ou bien sur du inline-block (http://www.alsacreations.com/tuto/lire/1340-Mise-en-page-CSS-avancee-grace-a-la-propriete-display.html) histoire de ne pas faire sortir les élément du flux comme avec le float :

.b{
    display : inline-block;
    vertical align : top; // ou baseline selon les besoin
    // fixer une width si besoin
}


Bonne journée
je sens que je vais encore apprendre des choses !!!

merci à tous, je reviens après installation Smiley smile

Fonctionne (évidemment Smiley cligne ) parfaitement : merci

re AUTO-EDIT

les deux fonctionnent parfaitement ...

MAIS, si, comme moi, vous devez l'installer sur un androïd, allez d'abord vérifier sur "CAN I USE" pour Flex.

=> display: inline-block est très bien aussi Smiley cligne Smiley biggrin
Modifié par corbintheone (03 Jul 2015 - 14:40)
Sujet clos
Aller à