Html5-css3
lafouine87
Messages postés
6
Date d'inscription
Statut
Membre
Dernière intervention
-
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
Bonjour, s'il vous plaît, je viens de commencer à developper en HTML5 CSS3, et je n'arrive pas à alligner horizontalement des (3 à 4) "articles" dans une même section!
Voici ce dont je parle:
<section>
<article class="as1"></article>
<article class="as2"></article>
<article class="as3"></article>
<article class="as4"></article>
</section>
J'ai séreusement besoin d'aide, je veux alligner horizontalement, sur la même page, les contenus de ces balises "articles" !
Merci d'avance
Voici ce dont je parle:
<section>
<article class="as1"></article>
<article class="as2"></article>
<article class="as3"></article>
<article class="as4"></article>
</section>
J'ai séreusement besoin d'aide, je veux alligner horizontalement, sur la même page, les contenus de ces balises "articles" !
Merci d'avance
3 réponses
-
Bonjour,
en rapide car je ne sais pas exactement ce que tu souhaites faire :
<section> <article style="display:inline-block; vertical-align:top; width:25%" class="as1"></article> <article style="display:inline-block; vertical-align:top; width:25%" class="as2"></article> <article style="display:inline-block; vertical-align:top; width:25%" class="as3"></article> <article style="display:inline-block; vertical-align:top; width:25%" class="as4"></article> </section>
Tu peux bien sur regrouper les style CSS dans ton fichier css pour les assigner au class
Voilà, voilà
Ecrit et assumé par Inspiring - copyright 2009-2014 -
Merci, le problème. J'ai pu le resoudre avec des margin-top, mais je vais encore essayer avec votre code! Encore merci infiniment!
-
petit truc
avec display inline-block il y a un espace crée automatiquement entre chaque block (4px environ)
donc avec width:25% le dernier block passera en dessous
il y cependant des astuces pour contourner ce probleme
https://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html
