Textumbruch erzwingen - Responsive design
0 
Matthias Apsel
0 
molily
Textumbruch erzwingen - Responsive design
Hallo,
in dem Beispiel
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<style>
figcaption {
display: inline-block; vertical-align: middle;
}
img {
display: inline-block; vertical-align: middle;
}
</style>
</head>
<body>
<figure>
<img src="bild.GIF" alt="..." />
<figcaption> Text1 Text2</figcaption>
</figure>
</body>
</html>
steht Der Text "Text1 Text2" neben dem Bild und zwar vertikal zentriert.
Wie kann ich über eine Media-Angabe in CSS erreichen, dass bei dem betreffenden (schmalen Medium) der Text weiterhin rechts vom Bild erscheint, allerdinge in zwei Zeilen Text1/Text2?
Zusatzfrage an JSFIDDLE-Kenner:
Wie kann ich dort eine Grafik einbinden?
Gruß
Werner
-
Om nah hoo pez nyeetz, Werner!
»» <body> > <figure> > <img src="bild.GIF" alt="..." /> > <figcaption> Text1 Text2</figcaption> > </figure> > </body> > </html> >steht Der Text "Text1 Text2" neben dem Bild und zwar vertikal zentriert.
Wie kann ich über eine Media-Angabe in CSS erreichen, dass bei dem betreffenden (schmalen Medium) der Text weiterhin rechts vom Bild erscheint, allerdinge in zwei Zeilen Text1/Text2?Die beiden Leerzeichen sind überflüssig. Eigentlich brauchst du gar nicht aktiv werden. Wenn der Platz nicht reicht, sollte der Text automatisch umbrechen.
Vielleicht ist display: table-cell für die beiden Elemente sogar die bessere Wahl.
JS-Fiddle: Bilder werde bei direkter Addressierung angezeigt.
<img src="http://example.com/image.jpg">Matthias
-
Hallo,
inline-block positioniert Inhalt immer in einer Zeilenbox. In einer Zeilenbox kann nicht gleichzeitig ein Bild liegen und daneben zwei Zeilen Text. Dann wären es ja zwei Zeilenboxen… ;)
Vielleicht lässt sich etwas mit inline-block basteln, was mir gerade nicht einfällt, aber ich behaupte einmal, inline-block ist hier nicht geeignet.
Flexbox wäre geeignet. Als Fallback können Tabellen zum Einsatz kommen verwenden. Erkennung von Flexbox ist nur mit JavaScript zuverlässig möglich – oder mit @supports. Beispiel:
http://jsfiddle.net/molily/WZJzN/
Grüße
Mathias
