Feste Spaltenbreite für responsive Design

Diskutiere Feste Spaltenbreite für responsive Design im CSS Forum im Bereich Programmierung; Ich kämpfe mit einem vermeintlich einfachen Problem. Ich möchte eine Spalte mit einer festen Pixelbreite haben, so dass der Textblock darin immer...
  • Feste Spaltenbreite für responsive Design Beitrag #1
DarkClown
DarkClown
New member
Beiträge
2
Punkte Reaktionen
0
Ich kämpfe mit einem vermeintlich einfachen Problem.
Ich möchte eine Spalte mit einer festen Pixelbreite haben, so dass der Textblock darin immer den Text (feste Textgröße) richtig mit dem Hintergrund der Spalte anzeigt. Da ich anscheinend nur eine proportionale Spaltenbreite definieren kann, ändert sich die Spaltenbreite aber immer.

column.jpg

Bei der Desktop-Auflösung ist das kein Problem, aber bei responsivem Design funktioniert das nicht. Das Definieren eines Margin der betroffenen Spalte bezieht sich immer auf den verbleibenden Platz, nicht aber auf die Spalte selbst. Wenn ich mit 2 Spalten arbeite, bezieht sich Definition eines Margins für die rechte Spalte immer auf den verbleibenden Platz innerhalb des rechten Spaltenblockes, aber nicht auf die linke Spalte.

Das Problem bleibt auch dann bestehen, wenn ich die Schriftgröße durch css-Fälle (@media (min-width: 576px) und (max-width: 991px)) differenziere. Der Hintergrund (Spaltenbreite) ist immer variabel, während die Textgröße für jede Medienauflösung konstant ist. Das hinterlegte Feld ändert also ständig seine Größe je nach Screen Resolution.

Ich habe keine Ahnung, wie ich dieses Problem lösen kann. Gibt es einen geeigneten Weg, um damit umzugehen? (wie man das richtig macht - best practice) Klingt für mich ziemlich gewöhnlich - aber was auch immer ich versuche .... ;-)
 
Zuletzt bearbeitet:
  • Feste Spaltenbreite für responsive Design Beitrag #2
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Das Problem lässt sich leicht mit Flexlayout lösen, siehe hier:
https://jsfiddle.net/Sempervivum/t86zpxhs/1/

Du schreibst jedoch von "Spalte". Wenn das bedeutet, dass es mehrere Zeilen gibt und die Spalten genau ausgerichtet sein sollen, wäre ein Gridlayout die bessere Wahl.
 
  • Feste Spaltenbreite für responsive Design Beitrag #3
DarkClown
DarkClown
New member
Beiträge
2
Punkte Reaktionen
0
Oh, sehr geil. Danke Dir! Klasse Hinweis.
 
Thema:

Feste Spaltenbreite für responsive Design

Oben Unten