Html5-css3

Fermé

lafouine87 Messages postés 6 Date d'inscription samedi 21 juin 2014 Statut Membre Dernière intervention 2 octobre 2014 - 4 août 2014 à 17:57
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 23 août 2014 à 14:08

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

A voir également:

Html5-css3
Html5 video player - Télécharger - Divers Web & Internet
Telecharger html5 css3 gratuit - Télécharger - HTML
Personnaliser balise audio html5 ✓ - Forum CSS
Définir une marge pour une page entière en HTML5 et CSS3 ✓ - Forum CSS
Html5 mac - Télécharger - Diffusion

3 réponses

Réponse 1 / 3

inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 265
Modifié par inspiring le 4/08/2014 à 18:58

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

Réponse 2 / 3

lafouine87 Messages postés 6 Date d'inscription samedi 21 juin 2014 Statut Membre Dernière intervention 2 octobre 2014
22 août 2014 à 18:46

Merci, le problème. J'ai pu le resoudre avec des margin-top, mais je vais encore essayer avec votre code! Encore merci infiniment!

Réponse 3 / 3

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
23 août 2014 à 14:08

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

Discussions similaires

html5: Video not properly encoded

Comment avoir un chat live en html5 simple et gratuit?

Sraf html5 browser v4

la balise <br> ou <br />

Fenêtre sraf html5 browser v4.0