Kann ich einen Spaltenumbruch in einem CSS-mehrspaltigen Layout festlegen?

Question

Ich habe einen großen Textabschnitt, der in ein mehrspaltiges CSS-Layout fließt, das sich beispielsweise über zwei, drei oder vier Spalten erstreckt und CSS hyphening verwendet. Irgendwann muss einer der Spalten-Texte früher beendet werden, damit der Rest des Absatzes am Anfang der zweiten Spalte beginnen kann.

Gibt es eine Möglichkeit, können wir einfach einen <column-break> setzen, um den Rest des Textes am Anfang der nächsten Spalte zu starten?

Momentan stopf ich die Spalte (die den Spaltenumbruch benötigt) mit vielen <br> s, um die Spalte in HTML zu verlängern, um den Effekt zu erzielen.

Außerdem, wenn etwas in einer der Spalten geändert wird, ist die Menge an <br> Füllung kurz und muss neu bewertet werden.

#multicolumn{ 
 
    -webkit-column-count: 2; /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 2; /* Firefox */ 
 
    column-count: 2; 
 
    
 
}

<div id="multicolumn">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>

See my JSFiddle.

Gibt es eine Möglichkeit, die erste Spalte elegant zu "beenden" und dem Browser mitzuteilen, den Rest des Inhalts in den nächsten Spalten zu beginnen?

Answer 1

5. Column breaks

Wenn der Inhalt in mehreren Spalten angelegt wird, muss der Benutzer-Agent bestimmen, wo Spaltenumbrüche platziert sind. Das Problem, Inhalte in Spalten zu zerlegen, ähnelt dem Brechen von Inhalt in Seiten.

Drei neue Eigenschaften eingeführt Spaltenumbrüche zu ermöglichen, in den gleichen Eigenschaften wie Seitenumbrüche werden beschrieben: ‚break-before‘, ‚break-after‘ und ‚break-inside‘. Diese Eigenschaften nehmen die gleiche Werte wie 'Seitenumbruch vor', 'Seitenumbruch nach' und 'Seitenumbruch' [CSS21]. Darüber hinaus werden einige neue Schlüsselwort Werte hinzugefügt.

Diese Eigenschaften beschreiben das Seiten-/Spaltenumbruchverhalten vor/nach/in der generierten Box. Diese Werte sind normen definiert in [CSS21]:

• auto: Weder Kraft noch verbieten eine Seite/Spaltenumbruch vor (nach innen), um die erzeugten Box.
• always: Erzwingen Sie immer einen Seitenumbruch vor (nach) der generierten Box.
• avoid: Vermeiden Sie einen Seiten-/Spaltenumbruch vor (nach, innerhalb) der generierten Box.
• left: Erzwingen Sie eine oder zwei Seitenumbrüche vor (nach) der generierten Box, damit die nächste Seite als linke Seite formatiert wird.
• right: Erzwingen Sie ein oder zwei Seitenumbrüche vor (nach) der generierten Box, damit die nächste Seite als rechte Seite formatiert wird.

Diese Spezifikation fügt die folgenden neuen Werte:

• page: Immer einen Seitenumbruch erzwingen vor (nach) der erzeugten Box.
• column: Immer einen Spaltenumbruch vor (nach) der generierten Box erzwingen.
• avoid-page: Vermeiden Sie einen Seitenumbruch vor (nach, innerhalb) der generierten Box.
• avoid-column: Vermeiden Sie einen Spaltenumbruch vor (nach, innerhalb) der generierten Box.

Daher könnten Sie so etwas wie

#multicolumn { 
 
    -webkit-column-count: 2; /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 2; /* Firefox */ 
 
    column-count: 2; 
 
} 
 
.column { 
 
    break-before: column; 
 
    break-after: column; 
 
}

<div id="multicolumn"> 
 
    <div class="column">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div> 
 
    <div class="column">SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div> 
 
</div>

verwenden jedoch nur Internet Explorer 10+ und Opera 11,10-12,1 scheinen diese Eigenschaften zu unterstützen.

Answer 2

Verwenden Sie die Tags <p>, um zwischen Absätzen zu unterscheiden.

<div id="multicolumn"> 
<p>FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
volutpat. Ut wisi enim ad minim veniam.</p> 
<div id="filler"></div> 
<p>SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate 
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at 
vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum 
zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor 
cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim 
placerat facer possim assum.</p> 
</div> 

Und die CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); 

#multicolumn{ 
-webkit-column-count: 2; /* Chrome, Safari, Opera */ 
-moz-column-count: 2; /* Firefox */ 
column-count: 2; 

} 

#filler { 
float: left; 
position: relative; 
background-color: #f00; 
height: 120px; 
width: 50%; 

http://jsfiddle.net/mnz2h9hr/2/

Die <p> Tags die Absätze zusammenhält, und die 'Füllstoff' (rot markiert) hält einen Raum ohne Text.

Answer 3

Wenn Sie in der Lage sind, jede Spalte in ein Div einzufügen, dann wäre die eleganteste Lösung die Verwendung eines Bootstrap-Grids.

.row { 
 
     margin: 0 -15px; 
 
    } 
 
    .column { 
 
     box-sizing: border-box; 
 
     float: left; 
 
     padding: 0 15px; 
 
     width: 50%; 
 
    }

<div id=row"> 
 
    <div class="column">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div> 
 
    <div class="column">SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div> 
 
</div>

Wenn Sie eine wysıwyg verwenden Kopie eingeben, können Sie dann Zugriff auf eine Quelle, um Ihre Spalten in divs wickeln müssen. Mit dem obigen Code werden die Spalten sehr einfach. und leicht reaktionsfähig gemacht.

Answer 4

Für Ihre Situation ist die beste Lösung, ein Rastersystem zu verwenden. Bitte führen Sie das Snippet in der Vollseitenansicht aus.

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container-fluid"> 
 
    <div class="row"> 
 
<div class="col-sm-6" style="background-color:lavenderblush;">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div> 
 
     <div class="col-sm-6" style="background-color:lavender;"> 
 
     SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis 
 
     dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div> 
 

 
    </div> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

Answer 5

Eine Möglichkeit, dies zu bewältigen wäre tatsächlich Ihren Text in den Absätzen umwickeln (p Tags), wie Sie für Semantik als auch tun sollen, und nicht Ihrem zweiter Absatz erlauben, zu brechen gegeben ist es nie länger als 1 Spalte.

Dies kann mit der CSS-Eigenschaft erreicht werden. https://developer.mozilla.org/en/docs/Web/CSS/break-inside

Beispiel-Code basiert auf dem Code-Schnipsel:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 700); 
 
#multicolumn { 
 
    -webkit-column-count: 2; 
 
    /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 2; 
 
    /* Firefox */ 
 
    column-count: 2; 
 
} 
 
p { 
 
    font-size: 1em; 
 
    line-height: 1.4; 
 
    margin: 0; 
 
    padding: 0 0 1.4em; 
 
} 
 
p:nth-of-type(2) { 
 
    -webkit-column-break-inside: avoid; 
 
    page-break-inside: avoid; 
 
    break-inside: avoid; 
 
} 
 

<div id="multicolumn"> 
 
    <p>FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p> 
 
    <p>SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p> 
 
</div>

Answer 6

mehr auf @Oriol beantworten Ausarbeiten Sie die Breite so erste Spalte kann immer linke Hälfte verwenden.

#multicolumn { 
 
    -webkit-column-count: 2; /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 2; /* Firefox */ 
 
    column-count: 2; 
 
} 
 

 
.column:nth-of-type(1) { 
 
width:50%; 
 
}

<div id="multicolumn"> 
 
    <div class="column">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div> 
 
    <div class="column">SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div> 
 
</div>

Answer 7

Technisch nicht die CSS mehrspaltigen Funktion, die Sie auf Spalte-break zielen in, aber das sieht optisch ähnlich.

.column { 
    width : 46%; 
    margin: 0% 2%; 
    height: 100%; 
    float: left; 
} 

<div class="column">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div> 

<div class="column">SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div> 

Hier ist der jsFiddle: http://jsfiddle.net/Vbr9d/242/