CSS3 Spalten und Bilder

Mein Beispiel hier, CSS3 Spalten und Bilder

ein Bild zeigt in der Mitte von CSS3 Spalten erzeugt. 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 eine NICHT-OBTRUSIVE Möglichkeit, das zu erreichen, wonach ich suche?

Ich würde gerne diese hier, alt text

ohne den Titel und sonstige Sachen aussehen erreichen in der linken oberen natürlich gelegen. 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 Browser-Unterstützung, so - jede Lösung ist großartig!

Vielen Dank im Voraus ....

Erik

Quelle

2011-01-02 Erik5388

^^ Im obigen Bild (der richtige) gibt es eine css3-Eigenschaft, die 4 Spalten mit einer Lücke von 20px definiert. Das Beispiel enthält eine divs, die jede Spalte umschließt. Die Spalte, die das Bild enthält (3. Spalte), weist Javascript an, die letzten beiden Spalten zu umbrechen und dann den Absatzelementen einen Rand hinzuzufügen. – Erik5388

Wie schwebst du es? Dafür wurden Floats gemacht! – rxgx

Ohne JavaScript-Hacks zu machen, glaube ich nicht, dass es eine reine CSS-Methode gibt, dies zu tun. 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. Knock out

Quelle

2011-01-09 17:56:50

Das ist die Antwort, nach der ich gesucht habe. Es wäre cool, wenn diese Fähigkeit in einer zukünftigen Spezifikation erscheinen würde. Was stinkt, weil ich glaube, dass sie vor ein paar Monaten ihren "letzten Anruf" hatten ... Ich bin mir nicht sicher, was die Spalte über die Spanne sagt, aber ich kann mich nicht daran erinnern, etwas anderes als die zwei Werte "alles" und " none "... Wenn Sie irgendwelche Änderungen in der modernen Browser-Implementierung der Spaltenspanne sehen, stellen Sie sicher, und lassen Sie mich wissen (: – Erik5388

) Soweit ich es verstehe, versuchen sie, die Spaltenspez zu nicht zu ändern, um es in Rec zu bekommen , dann wird Funktionalität in der nächsten Version der Spezifikation hinzufügen .. –

Vielleicht kann die Spaltenspanne Eigenschaft helfen, wenn Sie einen zusätzlichen Behälter für das Bild erstellen und die Spalten Spannweite auf die kumulierte Breite der Mitte eingestellt Säulen.

Sie könnten auch die mittlere Spalte größer und entfernen Sie die Notwendigkeit für eine andere Spalte, so dass der Text und das Bild wird gut ausgerichtet, aber bei diesem Schritt ist es Designüberlegung.

http://designshack.co.uk/tutorials/introduction-to-css3-part-5-multiple-columns

Quelle

2011-01-02 08:56:00

Statt die Anzahl der Spalt zu definieren, könnten Sie ihre Größe definieren, um die Größe der Bilder einstellen. Oder Sie können eine Größe für jede Spalte definieren, dann fügen Sie eine CSS-Selektoren für Bilder, um sie automatisch die Größe abhängig von der Breite der Spalte zu ändern.

So etwas wie .column { Spalten: 12em; }

.Spalte img { Breite: 10em; }

Quelle

2011-01-02 17:15:45 Tim

Ich mag auch Ihre Antwort. Das Ziel besteht jedoch nicht darin, das Bild neu zu skalieren, sondern das Bild mit dem Inhalt zu umhüllen. – Erik5388

die height und width img Attribute - sie sind nicht erforderlich - und verwenden CSS max-width:100%;

Es gibt einige rückwärts Kompatibilitätsprobleme (vor allem mit IE), aber sie können mit JS gesteckt werden. Diese Methode ist die Zukunft.

Eine nützliche verwandte Artikel mit Referenzen:

http://www.ldexterldesign.co.uk/2010/10/99-css-problems-but-liquid-aint-one/

Best,

Quelle

2011-01-30 23:05:00

Ich mag Ihre Antwort (und Ihr Blog - heh), aber das Ziel ist hier, das Bild nicht zu schrumpfen.Haben Sie stattdessen den Inhalt das Bild umwickeln. – Erik5388

Dies ist nicht genaue Antwort auf Ihre Frage, aber zumindest gibt es die Möglichkeit, Text um das Bild innerhalb einer Spalte zu wickeln. Überprüfen Sie "Beispiel X" von here.

Quelle

2012-03-22 07:08:50 nqw1

CSS3 Spalten und Bilder

Antwort

Verwandte Themen