CSS3 Spalten und Bilder
Mein Beispiel hier, 
Zeigt ein Bild in der Mitte von CSS3-generierten Spalten. Ich brauche den Text in der Spalte rechts neben dem Bild, um das Bild so zu umbrechen, dass es nicht vor dem Bild erscheint. Dies ist meines Wissens in aktuellen CSS nicht machbar.
Hat jemand einen NICHT-OBTRUSIVEN Weg, um das zu erreichen, wonach ich suche?
Ich würde gerne diesen Look hier erreichen,
ohne den Titel und das misc-Zeug, das sich oben links natürlich befindet. Die Idee wäre, das Hinzufügen von Bildern an beliebiger Stelle im Markup zu erlauben und es korrekt aussehen zu lassen.
Ich interessiere mich nicht für die Browserunterstützung, also - jede Lösung ist großartig!
Vielen Dank im Voraus ....
Erik
5 Antworten
Ohne JavaScript-Hacks zu machen, glaube ich nicht, dass es eine reine CSS-Methode dafür gibt. Es gibt die column-span-Eigenschaft, die von Opera unterstützt wird (derzeit nicht in einem öffentlichen Build), aber sie hat nur zwei Werte. nichts und alles. Die Spezifikation erlaubt derzeit nicht, die Anzahl der Spalten anzugeben, was sehr nützlich wäre. Es ist etwas, das ich gerne sehen würde.
Vielleicht kann die Eigenschaft column span hilfreich sein, wenn Sie einen zusätzlichen Container für das Bild erstellen und die Spaltenspannweite auf die kumulierte Breite der mittleren Spalten setzen.
Sie können auch die mittlere Spalte vergrößern und die Notwendigkeit für eine andere Spalte entfernen, so dass der Text und das Bild gut ausgerichtet sind, aber in diesem Schritt ist es eine Designüberlegung.
Knacken Sie die Attribute height und width img aus - sie werden nicht benötigt - und verwenden CSS max-width:100%;
Es gibt einige Probleme mit der Rückwärtskompatibilität (insbesondere mit IE), aber sie können mit JS verbunden werden. Diese Methode ist die Zukunft.
Ein nützlicher Artikel mit Referenzen:
Am besten,
Anstatt die Anzahl der Spalten zu definieren, können Sie ihre Größe definieren, um sie an die Größe der Bilder anzupassen. Oder Sie können eine Größe für jede Spalte definieren, dann fügen Sie CSS-Selektoren für Bilder hinzu, damit die Größe automatisch abhängig von der Breite der Spalte angepasst wird.
So ähnlich .Säule{ Spalten: 12em; }
.Spalte img { Breite: 10 m; }
Tags und Links javascript html5 layout css3