Marcel: Span oder div Tags als Blocksatz ausrichten

Beitrag lesen

Hallo,

ich versuche ein Menü responsive zu machen. In der Ansicht auf dem PC stehen die Menüpunkt alle hintereinander in einer Zeile. Wenn die Ansicht nun schmaler wird, dann sollen die Menüpunkte untereinander rutschen und im Blocksatz angeordnet werden. Das die Menüs untereinander rutschen, ist natürlich kein Problem, aber die Blocksatz Formatierung bekomme ich nicht hin.

Deshalb habe ich es mit dem folgenden Beispiel versucht, aber auch da klappt es nicht. Auch im Netz habe ich keine wirklich hilfreichen Infos dazu gefunden.

Ich hoffe nun, das einer von euch mir hier weiterhelfen kann.

Nachfolgend also nun die Beispielseite mit dem Versuch der Blocksatz Formatierung von normalem Text, von DIV, SPAN und P Tags:

<!DOCTYPE html>

<html>

<head>
  <title>div und text-align</title>
</head>

<body>

<style>

.div-wrapper, .text-wrapper, .span-wrapper, .p-wrapper{
    max-width               : 80em;
    min-width               : 7em;
    width                   : 100%;
    margin-left             : auto;
    margin-right            : auto;
    border                  : 1px solid grey;
    }

.div-wrapper{
    display                 : flex;
    flex-flow               : row wrap;
    flex-direction          : row;
    text-align              : justify;
}

.span-wrapper{
    display                 : flex;
    flex-flow               : row wrap;
    flex-direction          : row;
    text-align              : justify;
}

.p-wrapper{
    display                 : flex;
    flex-flow               : row wrap;
    flex-direction          : row;
    text-align              : justify;
}

.text-wrapper{
    text-align              : justify;
}

</style>




<div class="text-wrapper">

    Wort1 Wort2 Wort3 Wort4 WortWort5 WortWortWort6 Wort1 Wort2 Wort3 Wort4
    Wort1 Wort2 Wort3 Wort4 WortWort5 WortWortWort6 Wort1 Wort2 Wort3 Wort4
    Wort1 Wort2 Wort3 Wort4 WortWort5 WortWortWort6 Wort1 Wort2 Wort3 Wort4
    Wort1 Wort2 Wort3 Wort4 WortWort5 WortWortWort6 Wort1 Wort2 Wort3 Wort4
    Wort1 Wort2 Wort3 Wort4 WortWort5 WortWortWort6 Wort1 Wort2 Wort3 Wort4
    Wort1 Wort2 Wort3 Wort4 WortWort5 WortWortWort6 Wort1 Wort2 Wort3 Wort4
    Wort1 Wort2 Wort3 Wort4 WortWort5 WortWortWort6 Wort1 Wort2 Wort3 Wort4
    Wort1 Wort2 Wort3 Wort4 WortWort5 WortWortWort6 Wort1 Wort2 Wort3 Wort4
    Wort1 Wort2 Wort3 Wort4 WortWort5 WortWortWort6 Wort1 Wort2 Wort3 Wort4
    Wort1 Wort2 Wort3 Wort4 WortWort5 WortWortWort6 Wort1 Wort2 Wort3 Wort4

</div>




<div style="margin-top: 1em; margin-bottom: 1em;">&nbsp;</div>


<div class="div-wrapper">

    <div class="div-class">|div1</div>
    <div class="div-class">|div2222|</div>
    <div class="div-class">|div33|</div>
    <div class="div-class">|div44444|</div>
    <div class="div-class">|div555555|</div>
    <div class="div-class">|div1</div>
    <div class="div-class">|div2222|</div>
    <div class="div-class">|div33|</div>
    <div class="div-class">|div44444|</div>
    <div class="div-class">|div555555|</div>
    <div class="div-class">|div1</div>
    <div class="div-class">|div2222|</div>
    <div class="div-class">|div33|</div>
    <div class="div-class">|div44444|</div>
    <div class="div-class">|div555555|</div>
    <div class="div-class">|div1</div>
    <div class="div-class">|div2222|</div>
    <div class="div-class">|div33|</div>
    <div class="div-class">|div44444|</div>
    <div class="div-class">|div555555|</div>
    <div class="div-class">|div1</div>
    <div class="div-class">|div2222|</div>
    <div class="div-class">|div33|</div>
    <div class="div-class">|div44444|</div>
    <div class="div-class">|div555555|</div>
    <div class="div-class">|div1</div>
    <div class="div-class">|div2222|</div>
    <div class="div-class">|div33|</div>
    <div class="div-class">|div44444|</div>
    <div class="div-class">|div555555|</div>
    <div class="div-class">|div1</div>
    <div class="div-class">|div2222|</div>
    <div class="div-class">|div33|</div>
    <div class="div-class">|div44444|</div>
    <div class="div-class">|div555555|</div>
</div>


<div style="margin-top: 1em; margin-bottom: 1em;">&nbsp;</div>



<div class="span-wrapper">

    <span class="span-class">|span-text1</span>
    <span class="span-class">|span-text2222|</span>
    <span class="span-class">|span-text33|</span>
    <span class="span-class">|span-text44444|</span>
    <span class="span-class">|span-text555555|</span>
    <span class="span-class">|span-text1</span>
    <span class="span-class">|span-text2222|</span>
    <span class="span-class">|span-text33|</span>
    <span class="span-class">|span-text44444|</span>
    <span class="span-class">|span-text555555|</span>
    <span class="span-class">|span-text1</span>
    <span class="span-class">|span-text2222|</span>
    <span class="span-class">|span-text33|</span>
    <span class="span-class">|span-text44444|</span>
    <span class="span-class">|span-text555555|</span>
    <span class="span-class">|span-text1</span>
    <span class="span-class">|span-text2222|</span>
    <span class="span-class">|span-text33|</span>
    <span class="span-class">|span-text44444|</span>
    <span class="span-class">|span-text555555|</span>
    <span class="span-class">|span-text1</span>
    <span class="span-class">|span-text2222|</span>
    <span class="span-class">|span-text33|</span>
    <span class="span-class">|span-text44444|</span>
    <span class="span-class">|span-text555555|</span>
    <span class="span-class">|span-text1</span>
    <span class="span-class">|span-text2222|</span>
    <span class="span-class">|span-text33|</span>
    <span class="span-class">|span-text44444|</span>
    <span class="span-class">|span-text555555|</span>
    <span class="span-class">|span-text1</span>
    <span class="span-class">|span-text2222|</span>
    <span class="span-class">|span-text33|</span>
    <span class="span-class">|span-text44444|</span>
    <span class="span-class">|span-text555555|</span>

</div>


<div style="margin-top: 1em; margin-bottom: 1em;">&nbsp;</div>



<div class="p-wrapper">

    <p class="p-class">|p-text1</p>
    <p class="p-class">|p-text2222|</p>
    <p class="p-class">|p-text33|</p>
    <p class="p-class">|p-text44444|</p>
    <p class="p-class">|p-text555555|</p>
    <p class="p-class">|p-text1</p>
    <p class="p-class">|p-text2222|</p>
    <p class="p-class">|p-text33|</p>
    <p class="p-class">|p-text44444|</p>
    <p class="p-class">|p-text555555|</p>
    <p class="p-class">|p-text1</p>
    <p class="p-class">|p-text2222|</p>
    <p class="p-class">|p-text33|</p>
    <p class="p-class">|p-text44444|</p>
    <p class="p-class">|p-text555555|</p>
    <p class="p-class">|p-text1</p>
    <p class="p-class">|p-text2222|</p>
    <p class="p-class">|p-text33|</p>
    <p class="p-class">|p-text44444|</p>
    <p class="p-class">|p-text555555|</p>
    <p class="p-class">|p-text1</p>
    <p class="p-class">|p-text2222|</p>
    <p class="p-class">|p-text33|</p>
    <p class="p-class">|p-text44444|</p>
    <p class="p-class">|p-text555555|</p>
    <p class="p-class">|p-text1</p>
    <p class="p-class">|p-text2222|</p>
    <p class="p-class">|p-text33|</p>
    <p class="p-class">|p-text44444|</p>
    <p class="p-class">|p-text555555|</p>
    <p class="p-class">|p-text1</p>
    <p class="p-class">|p-text2222|</p>
    <p class="p-class">|p-text33|</p>
    <p class="p-class">|p-text44444|</p>
    <p class="p-class">|p-text555555|</p>

</div>


</body>
</html>

Danke vorab für jeden hilfreichen Hinweis!

Grüße Marcel

akzeptierte Antworten