Grafik neben h2

JessicaOnline · 6. Dezember 2016

Hallo,

ist es möglich ohne ein HTML anzupassen

HTML

<div>
	<h2>Artikelübersicht</h2>
	<img src="http://www.bilder-upload.eu/upload/6d1979-1481029090.png" alt="Artikel hinzufügen">
</div>

Die <h2> sollte auf der linken Seite stehen und das + auf der rechten Seite

EDIT:

Ich dachte in etwa so: http://codepen.io/anon/pen/gLeVQK allerdings wird jetzt mit + total zerrissen, sprich es wird größer dargestellt als es überhaupt ist. Warum? Und wie kann ich dieses verhindern?

MrMurphy · 6. Dezember 2016

Hallo

Nebenbei, ohne Bezug zum Problem: Das die margin-top-Anweisung von der nachfolgenden margin-Anweisung überschrieben wird ist dir bekannt?

Zitat

Warum?

Weil durch display: flex alle Flex-Items einer Zeile gleich hoch gezogen werden. Das ist die Standardvorgabe stretch.

Zitat

Und wie kann ich dieses verhindern?

Zum Beispiel durch Hinzufügen zu .titel von

Code

align-items: center;

Dadurch werden alle Flex-Items in ihrer eigentlichen Höhe angezeigt und horizontal zentriert. Andere mögliche Werte sind zum Beispiel

Code

align-items: flex-end;

Code

align-items: flex-start;

Code

align-items: baseline;

Gruss

MrMurphy

JessicaOnline · 6. Dezember 2016

Code

Nebenbei, ohne Bezug zum Problem: Das die margin-top-Anweisung von der nachfolgenden margin-Anweisung überschrieben wird ist dir bekannt?

Ist mir bekannt, denn der Browser geht von oben nach unten die CSS Datei durch. Dieses obere CSS war noch von einer früheren Variante drin, hab es raus geworfen.

Code

align-items: center;

Danke habe ich so umgesetzt und es funktioniert:
http://codepen.io/anon/pen/gLeVQK

HTML

<main>

<div class="titel">
	<h2>Artikelübersicht</h2>
	<img src="http://www.bilder-upload.eu/upload/6d1979-1481029090.png" alt="Artikel hinzufügen">
</div>




</main>

Alles anzeigen

CSS

.titel {
    display: flex;
    justify-content: space-between;
    padding: 1em;
    max-width: 500px;
    margin: 0 auto;
    align-items: center;
}

Danke für deine Hilfe.

Grafik neben h2

Jetzt mitmachen!

Teilen