Wie funktioniert das CSS-Spaltenlayout mit einem "schwebenden" Objekt, das sich über mehrere Spalten erstreckt?

Question

würde Ich mag ein Layout in CSS zu schaffen, die etwa wie folgt aussieht:

+----------------+ __5_____ 
|    | __6_____ 
|    | __7_____ 
|    | __8_____ 
+----------------+ __9_____ 
___1____ __3_____ __10____ 
___2____ __4_____ 

Grundsätzlich wird der Text (in dem obigen Diagramm die Linien 1 bis 10 gekennzeichnet) in einem Drei-Spalten-Layout angeordnet sind, , mit einem Block (Bild oder was auch immer), der oben links sitzt, zwei Spalten besetzt und den Text verschiebt.

Wichtigerweise möchte ich wirklich vermeiden, manuell anzugeben, wo die Spaltenumbrüche sind, da der Inhalt vom Benutzer bereitgestellt wird. Ich habe die Eigenschaftenfamilie der CSS-Spalten (Spaltenbreite, Spaltenanzahl usw.) verwendet, um das Spaltenlayout für den Text zu erhalten, aber ich habe nicht viel Erfolg dabei, den großen Fließblock an die gewünschte Stelle zu setzen. Gibt es eine Möglichkeit, dies zu tun, die nicht einen Stapel von JS enthält, um die optimalen Spaltenunterbrechungsorte zu berechnen und die Spalten selbst zu generieren?

Bearbeitet, um hinzuzufügen: für den Fall, dass es nicht klar ist, in diesem Beispiel gibt es 10 Zeilen, aber in der Praxis muss ich in der Lage sein, mit einer beliebigen Anzahl von Zeilen und immer noch Spalten von etwa gleicher Höhe zu erhalten.

Answer 1

Sie können versuchen, Ihr Bild div Breite auf 66% des Behälters, und fügen Sie Polsterung in beiden Seiten Einstellung mit dem Leerraum zwischen den Säulen auszurichten:

.div-with-image { 
    width: 66%; // 2/3 of the container 
    padding: 0 20px; // assuming 20px gutters for the columns 
} 

UPDATE

Wie die current state of the CSS Multi-column Module, ist die einzige "natürliche" Alternative, um eine Bildspanne durch mehrere Spalten zu machen, entweder durch die column-span Eigenschaft oder überläuft das Bild in der Spalte. Jedoch

, column-spandoesn't support -yet- andere Werte als none (default) und all, und der Überlauf werden nicht den Text in den nächsten Spalten verschieben, sondern would just cover it oder will be clipped durch die Säule, enthaltend (in Abhängigkeit von dem Browser).

Die sauberste Lösung, die mir in den Sinn kommt:

Absolute Position, um das Bild der oberen linken Ecke und definieren seine Breite 2 Spalten zu überbrücken, den oberen Rand des ersten Absatzes auf die Höhe Ihres Bildes und fügen Sie eine Pause vor einem Dummy-Element (nur ein Platzhalter, könnte ein span) mit einer Klasse identifiziert werden. Da sich das Dummy-Element in der ersten Zeile der zweiten Spalte befindet, können Sie den gleichen Rand wie im ersten Absatz der ersten Spalte zuweisen.

#image-placeholder { 
    width: 600px; 
    height: 200px; 
    background-color: lightgreen; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

#columnized { 
    -moz-column-width: 300px; 
    column-width: 300px; 
    position: relative; 
} 

#columnized p:nth-child(2) { // the image is the first child 
    margin-top: 200px; 
} 

.break { // your dummy element (I used a span) 
    break-before: always; 
    display: inline-block; 
    margin-top: 214px; // I had to tweak the margin a little 
} 

Zusätzliche Hinweise

Ich weiß, dass Sie Ihr Snippet so einfach und möglich gemacht, aber nur für den Fall: Speichern p Tags hinzuzufügen und zu machen es reagiert (Best Practices).Möglicherweise möchten Sie die Höhe des #columnized Div festlegen, um die gleiche Pause über verschiedene Bildschirmgrößen zu verwenden.

Answer 2

Sie könnten einfach ein einfaches zweispaltiges Layout erstellen und je nach Bedarf in zwei Hälften teilen. JSFiddle

/* 2 column grid */ 
 
.gridWrapper { 
 
    width: 80%; 
 
    float: none; 
 
    margin: 0 auto; 
 

 
    margin-top: 50px; 
 
    margin-bottom: 50px; 
 
} 
 

 
.column { 
 
    float: left; 
 
    width: 50%; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.column img { 
 
    width: 100%; 
 
    max-width: 400px; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    display: block; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.column p { 
 
    float: left; 
 
    width: 100%; 
 
    padding: 10px; 
 
    margin: 0 0 5px; 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
    border: 1px solid gray; 
 
} 
 

 
.left, .right { 
 
    border: 1px solid blue; 
 
} 
 

 
.split { 
 
    float: left; 
 
    width: 50%; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
    border: 1px solid red; 
 
}

<div class="gridWrapper"> 
 
    <div class="column left"> 
 
    <div class="image"> 
 
     <img src="http://c.shld.net/rpx/i/s/i/spin/image/spin_prod_709722401??hei=64&wid=64&qlt=50"> 
 
    </div> 
 
    <div class="split"> 
 
     <p>1</p> 
 
     <p>2</p> 
 
    </div> 
 
    <div class="split"> 
 
     <p>3</p> 
 
     <p>4</p> 
 
    </div> 
 
    </div> 
 
    <div class="column right"> 
 
    <p>5</p> 
 
    <p>6</p> 
 
    <p>7</p> 
 
    <p>8</p> 
 
    <p>9</p> 
 
    </div> 
 
</div><!-- END gridWrapper -->