Bild und Text auf gleicher Höhe

[lisa009]

Hallo an alle,

ich bin ein HTML Neuling und habe an die Erfahrenen hier im Forum eine Frage. Ich möchte auf einer Html-Seite ein Bild und den passenden Text dazu auf gleicher Höhe platzieren, wie kann ich das am besten umsetzen?

LG
Lisa

 

[MrMurphy]

Hallo

Die Abstände (padding, border, margin) anpassen und mit dem Flexbox-Modell ausrichten.

Gruss

MrMurphy

 

[LeCub]

Zum Beispiel könnte das so in etwa gehen: http://codepen.io/jannisrohden/pen/NRWpPb

 

[lisa009]

Danke für die schnellen Antworten, kann ich das auch mit einer Tabelle machen?

 

[SpiceLab]

Danke für die schnellen Antworten, kann ich das auch mit einer Tabelle machen?

Tabellen dienen semantisch nicht für gestalterische Aufgaben, z.B. die vertikale Ausrichtung benachbarter Elemente/Inhalte, sondern zur Aufbereitung von tabellarischen Daten.

 

[rantanplan2000]

Man muss dazu sagen, dass FlexBox mit dem Internet-Explorer so seine Probleme hat:
http://caniuse.com/#search=flexbox

Die Alternative wäre, sowas mit JS zu machen (jQuery).
https://blog.kulturbanause.de/2015/04/die-hoehe-von-elementen-mit-jquery-abfragen-und-angleichen/

Demo:
https://media.kulturbanause.de/blog/2015/04/jquery-equal-height-41.html

 

[SpiceLab]

Man muss dazu sagen, dass FlexBox mit dem Internet-Explorer so seine Probleme hat:
http://caniuse.com/#search=flexbox

IE8 hat seine besten Zeiten schon lange hinter sich gelassen.

Ansonsten funktioniert das Flexbox-Demo in den aktuelle(re)n Fassungen doch einwandfrei.

Die Alternative wäre, sowas mit JS zu machen (jQuery).
https://blog.kulturbanause.de/2015/04/die-hoehe-von-elementen-mit-jquery-abfragen-und-angleichen/

Demo:
https://media.kulturbanause.de/blog/2015/04/jquery-equal-height-41.html

Ich glaube, Du hast hier das Anliegen mißverstanden ;)

Bild und Text auf gleicher Höhe

Ich möchte auf einer Html-Seite ein Bild und den passenden Text dazu auf gleicher Höhe platzieren

Die Betonung liegt hier auf "auf"

Nicht die automatische Höhenangleichung benachbarter Elemente ist gefragt, sondern die vertikale Ausrichtung der Bildoberkante zum umgebenden Text - per Voreinstellung (ohne spezielle CSS-Formatierung) sitzt der Text untenbündig zur Grafik, was Auslöser/Motiv dieses Themas war.

Weil's in der aktuellen SELFHTML-Fassung https://wiki.selfhtml.org nicht mehr geführt wird, hier eine Kopie davon

https://www2.informatik.hu-berlin.de/Themen/www/selfhtml/html/grafiken/ausrichten.htm#css

Demo: https://www2.informatik.hu-berlin.de/Themen/www/selfhtml/html/grafiken/anzeige/img_css.htm

@LeCub's Flexbox-Demo müsste wie folgt lauten, um dem Kriterium "obenbündig" gerecht zu werden

main {
  ...
  align-items: flex-start; /* anstatt center */
  ...
}

Siehe http://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align_flex-start

Und für's enthaltene <p> mit margin:0 den voreingestellten Außenabstand zurücksetzen, damit's am Ende auch richtig paßt - sofern kein Reset-CSS eingebunden ist, das das übernimmt :)

- Moderation: Von HTML nach CSS verschoben -

 

[LeCub]

Man muss dazu sagen, dass FlexBox mit dem Internet-Explorer so seine Probleme hat:
http://caniuse.com/#search=flexbox

Ich könnte dass ganze auch prefixen und damit alles bis zum IE10 unterstützen, wer Versionen darunter unterstützen möchte, verschwendet meiner Meinung nach Zeit.

@lisa009 wenn du einen Überblick über deine Möglichkeiten bei Flexbox haben möchtest (inklusive prefixes für den IE), empfehle Ich folgenden Artikel: http://www.mediaevent.de/css/display-flex.html

 

[rantanplan2000]

Ich glaube, Du hast hier das Anliegen mißverstanden ;)

tut mir leid, habe es wirklich falsch gelesen.