Textumbruch erzwingen - Responsive design
Werner
- css
0 Matthias Apsel
0 molily
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