5568 sujets

Sémantique web et HTML

Bonjour.

Je cherche à afficher un texte à plusieurs entrées sur deux "colonnes" de cette manière :

upload/1573477305-12427-copie.png

Pour le moment j'utilise un tableau mais je cherche une méthode plus moderne. J'ai essayé avec des <div> mais ça part dans tous les sens dès qu'il y a plus d'une entrée ! Smiley biggrin

Merci d'avance.
Modifié par Nerva (11 Nov 2019 - 14:11)
Administrateur
Hello,

Ce que tu décris semble correspondre parfaitement à des Listes de Définition : https://www.lesintegristes.net/2009/12/28/comment-utiliser-les-listesde-definitions/

Pour ce qui est de l'affichage, Grid Layout fera l'affaire en quelques petites lignes :

<dl>
  <dt>Premièrement</dt>
  <dd>Lorem Elsass Ipsum mitt picon bière munster du ftomi! Ponchour bisame. Bibbeleskaas jetz rossbolla sech choucroute un schwanz geburtstàg, Chinette dû, ìch bier deppfele schiesser. Flammekueche de knèkes Seppele gal! a hopla geburtstàg, alles fraü Chulia Roberts oder knäckes dûû blottkopf. </dd>
  <dt>Premièrement</dt>
  <dd>Lorem Elsass Ipsum mitt picon bière munster du ftomi! Ponchour bisame. Bibbeleskaas jetz rossbolla sech choucroute un schwanz geburtstàg, Chinette dû, ìch bier deppfele schiesser. Flammekueche de knèkes Seppele gal! a hopla geburtstàg, alles fraü Chulia Roberts oder knäckes dûû blottkopf. </dd>
  <dt>Premièrement</dt>
  <dd>Lorem Elsass Ipsum mitt picon bière munster du ftomi! Ponchour bisame. Bibbeleskaas jetz rossbolla sech choucroute un schwanz geburtstàg, Chinette dû, ìch bier deppfele schiesser. Flammekueche de knèkes Seppele gal! a hopla geburtstàg, alles fraü Chulia Roberts oder knäckes dûû blottkopf. </dd>
</dl>


dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
}
dd {
  margin-left: 0;
}


Démo : https://codepen.io/raphaelgoetter/pen/eYYjyqJ?editors=1100
Meilleure solution