Zunächst möchte ich sagen, dass die Verwendung des mehrspaltigen Layoutmoduls noch nicht empfehlenswert ist.

Hauptsächlich wegen der fehlenden Unterstützung für die Eigenschaften break-before , break-after , break-inside , mit Ausnahme von IE 10+ und den proprietären -webkit-column-break-* -Eigenschaften (siehe: CSS3 Mehrfachspaltenlayout ).
(Sie können auch meine Antwort auf diese SO-Frage ansehen: IE (11) unsachgemäße Behandlung von CSS-Multispalten? )

Zusätzlich müssen Sie daran denken, dass es ein sogenanntes " mehrspaltiges Pseudo gibt -Algorithmus ", der von Ihrem :first-letter Selektor verwirrt zu sein scheint.

Sie können dieses Problem vermeiden, indem Sie stattdessen ein span -Element mit einem Klassenattribut für die Initialen verwenden.

Aber da die ersten Buchstaben größer sind als der Rest des Textes, entsteht ein anderes Problem Es kann vorkommen, dass eine (einzelne) Textzeile des Anfanges eines Absatzes mit einer Drop-Cap zur vorherigen Spalte passt, während die Drop-Cap (die etwa doppelt so hoch wie der normale Text ist) nicht darf.

Um dieses unerwünschte Verhalten zu vermeiden, müssen Sie ein anderes span -Element verwenden, das mindestens mehr Text enthält, als in eine einzige Zeile (aus Text) passen kann!
Und diese Spain-Elemente geben ein display: inline-block; löst dieses Problem.

Nur ein Wort zur Antwort von Amir5000: Obwohl meine vorgeschlagene Lösung auch einige zusätzliche Span-Elemente benötigt, verwendet sie kein "rein präsentatives Markup", das auch unerwünschte Leerzeilen erzeugen kann.

Aber wie eingangs gesagt, ist die Verwendung von Multi-Column zumindest sehr "schwierig" und es ist sehr schwierig, vorhergesagte Ergebnisse über Browser und / oder unterschiedliche Ansichtsfensterbreiten zu erhalten.

Hier ist meine vorgeschlagene "Lösung": DEMO

Die Ursache des Problems war float:left auf #multicolumn p:first-letter , wenn Sie das herausnehmen, werden Sie sehen, dass es dieses Problem nicht mehr hat; Sie haben jedoch nicht das gleiche Format wie beim ersten Buchstaben. Also habe ich ein JSFIDDLE erstellt, wo ich

#multicolumn p { float: left; }

und fügte eine Breite für den Container #multicolumn hinzu und zentrierte sie, wie Sie sehen können.

Ich hoffe, das löst das Problem für Sie.

------- Aktualisierung ---------

Nachdem ich viel Zeit damit verbracht habe, es wie beabsichtigt fließen zu lassen, war ich in der Lage, eine Arbeit zu finden, die ziemlich einfach ist, wenn Sie sich jetzt das aktualisierte FIDDLE

Ich habe ein leeres span zwischen den Absätzen hinzugefügt, um den Float zu löschen, und außerdem eine Medienabfrage hinzugefügt, damit es auf kleineren Bildschirmen schöner aussieht

Dies war der einfachste Weg, um Ihr Problem zu lösen, hoffe, dass es hilft!

Ich bin mir nicht sicher über das Spaltenproblem. Du solltest eine Geige dafür machen, damit wir dir schneller helfen können. Soweit die erste Kappe Problem. Das ist ziemlich schwierig, was sind deine Einschränkungen? Kannst du es richtig programmieren oder musst du es dynamisch machen?

Ich habe hier eine hartcodierte Lösung gepostet. Es ist im Grunde nur mit

Ссылка

Ich habe Chenges unter CSS

Demos