Elemente inline darstellen

Afox · March 17, 2017 at 11:50 PM

Hallo,

ich habe relativ viele Elemente die ich alle gerne in einer Reihe ("inline") darstellen möchte. Diese unterteilen sich in 3 Spalten: links, rechts und mittel.

links und rechts sollen feste Breiten haben, die mittlere soll den Rest einnehmen.

In links und rechts, sollen jeweils 2 Elemente inline dargestellt werden.

in der mittleren Spalte soll Text stehen, dieser könnte z.B. mittels text-overflow: ellipsis am überfließen gehindert werden Alternativ wäre auch ein umbrechen möglich (ich weiß aber gerade nicht wie man das macht)

ich habe mal ein Bild gemacht wie es aussehen könnte:

rot sind alle Elemente die in einer Reihe dargestellte werden sollen, grün die Spalten. Evtl. muss noch ein Wrapper drumherum, den ich ebenfalls dargestellt habe.

Sollte ich mit div-Containern arbeiten?

Wenn ja: bietet sich ein flex-Wrapper an? Wie bekomme ich das mit den festen Breiten hin?

Die Darstellung ist für mobile Geräte gedacht.

Danke und Gruß,

Afox

**Alexander Ebert** · March 18, 2017 at 11:10 AM Official Post

HTML

<div style="display: flex">
    <div style="flex: 0 0 100px">
        <!-- feste Breite links -->
    </div>
    
    <div style="flex: 1">
        <!-- dynamische Breite in der Mitte -->
    </div>
    
    <div style="flex: 0 0 100px">
        <!-- feste Breite rechts -->
    </div>
</div>

Display More

Der Code beschreibt nur den Wrapper (türkis) sowie die einzelnen Segmente (grün). Theoretisch kannst du die Unterteilung (rot) auch mit flex umsetzen, Je nachdem setzt du die dann entweder fix auf 50% oder aber du vergibst für beide flex: 1, wodurch die Platzverteilung dynamisch in Relation zur Inhaltsbreite statt findet.

PS: inline ist in diesem Kontext unglücklich gewählt, da man bei CSS darunter das Einbetten innerhalb eines Fließtextes versteht. Ein Beispiel für ein derartiges Inline-Element wäre der Fettdruck oder der hier verwendete Inline-Code. Mit "In einer Zeile darstellen" hat "inline" nichts zu tun und könnte für Dritte in dieser Verwendung irritierend sein

Participate now!