Span oder div Tags als Blocksatz ausrichten bearbeitet von Marcel 29.08.2017 00:46 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: ~~~HTML <!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;"> </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;"> </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;"> </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
Span oder div Tags als Blocksatz ausrichten bearbeitet von Marcel 29.08.2017 00:47 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 mit hier weiterhelfen kann. Nachfolgend also nun die Beispielseite mit der Blocksatz Formatierung von normalem Text, von DIV, SPAN und P Tags: ~~~HTML <!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;"> </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;"> </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;"> </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
nicht angemeldet
