MrMurphy1: Tabellenähnliches Design mit Flexbox

Beitrag lesen

Hallo,

für dein Vorhaben sind span-Elemente ungeeignet. Dafür bietet sich eher das dl-Element an.

Die beiden div sind überflüssig, außer du hälst uns Informationen vor.

Dadurch wird das HTML auch viel übersichtlicher als deine span-div-Orgie.

<dl class="main-container">
   <dt>Titel:</dt>
   <dd>Hier geht es um dies und das</dd>
   <dt>Autor:</dt>
   <dd>Ich</dd>
   <dt>Seiten:</dt>
   <dd>1</dd>
   <dt>Worte:</dt>
   <dd>200</dd>
</dl>

Das CSS für Flexbox ist wie flexbox-üblich sehr einfach:

/*Flexbox*/
dl.main-container {
   display: flex;
   flex-wrap: wrap;
}
.main-container dt {
   flex: 1 1 20%;
}
.main-container dd {
   flex: 1 1 70%;
}

Vom restlichen CSS ist nur das margin-left: 0 (bzw. margin: 0) für das dd-Element erforderlich, der Rest dient nur der Optik und kann von dir entsprechend angepasst werden. Die 300px Gesamtbreite hattest du ja vorgegeben, die können natürlich auch geändert werden.

/*Restliches CSS*/
dl.main-container {
   width: 300px;
   padding: 0.5rem;
   border: 1px solid black;
   margin: 0 auto;
}
.main-container dt {
   padding: 0.3rem;
   border: 1px solid silver;
}
.main-container dd {
   text-align: center;
   padding: 0.3rem;
   border: 1px solid silver;
   margin: 0;
}

Gruss

MrMurphy