Zur Navigation

Text um Bilder fliessen assen

2 Jörg Kruse

Das Vorbild ist mit einer Flexbox umgesetzt. Man benötigt hierbei eine übergeordnete Box, welche man als Flexbox definieren kann, z.B.:

<div class="zahn-info">
    <h3>Überschrift</h3>
    <div class="text">
        <p>Text Text Text</p>
        <p>Text Text Text</p>
    </div>
    <img src="gebiss.png" alt="Gebiss">
</div>

div.zahn-info {
    display: flex;
    flex-flow: row wrap;
}

Die Überschrift erhält eine Breite von 100%:

div.zahn-info h3 {
    width: 100%;
}

... der Text-Container eine Breite von zwei Drittel:

div.zahn-info div.text {
    width: 67%;
}

... und das Bild (bzw. der Bild-Container) von einem Drittel:

div.zahn-info img {
    width: 33%;
}

Soll das Bild vor den Text rücken, kann mittels order die Reihenfolge geändert werden (beginnend mit 0):

div.zahn-info div.text {
    width: 67%;
    order: 1;
}

div.zahn-info img {
    width: 33%;
    order: 0;
}

Auf herkömmliche Weise lassen sich Bilder auch mit float:left und float:right umfließen, hierbei müssen die Bilder aber vor dem Text im HTML-Code stehen. Dafür braucht es dann keine übergeordnete Flexbox

17.01.2018 20:23 | geändert: 17.01.2018 20:29

3 PKV-Wiki (Gast)

Was ich noch nicht verstehe:

ich muss also zwei div class anlegen - Einmal für Bilder links vor dem Text und einmal für Bilder rechts?

<div class="zahn-info"> und
<div class="zahn-info1">


Was empfiehlt sich in meinem Fall: Flexbox oder einfacher float?

Mein Problem ist, dass ich zusätzlich unter jedem Bild die Quelle angeben muss.

18.01.2018 13:11

4 Jörg Kruse

Mein Problem ist, dass ich zusätzlich unter jedem Bild die Quelle angeben muss.

Ja, dann würde ich Bild und Bildunterschrift in einem Container unterbringen, und diesen dann floaten

<div class="zahn-info">
    <h3>Überschrift</h3>
    <div class="text">
        <p>Text Text Text</p>
        <p>Text Text Text</p>
    </div>
    <div class="bild">
         <img src="gebiss.png" alt="Gebiss">
        <p>Bildunterschrift</p>
    </div>
</div>

div.zahn-info div.bild {
    width: 33%;
}

ich muss also zwei div class anlegen - Einmal für Bilder links vor dem Text und einmal für Bilder rechts?

Ich würde für den ersten Fall einfach eine zweite Klasse hinzufügen:

<div class="zahn-info bild-links">

... und bei Vorhandensein die Reihenfolge ändern:

div.zahn-info.bild-links div.text {
    order: 1;
}
div.zahn-info.bild-links div.bild {
    order: 0;
}

18.01.2018 14:06 | geändert: 18.01.2018 14:07

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]