Posso impostare un'interruzione di colonna in un layout multicolonna CSS?

Question

Ho un grande paragrafo di testo che scorre in un layout multicolonna CSS che si estende, ad esempio, due, tre o quattro colonne utilizzando CSS hyphening. A un certo punto, è necessario terminare in precedenza uno dei testi della colonna per consentire l'inizio del resto del paragrafo nella parte superiore della seconda colonna.

C'è un modo in cui possiamo semplicemente impostare uno <column-break> per avviare il resto del testo nella parte superiore della colonna successiva?

Attualmente sto riempiendo la colonna (che ha bisogno dell'interruzione di colonna) con un sacco di <br> s per allungare la colonna in HTML al fine di ottenere l'effetto.

Inoltre, ogniqualvolta qualcosa viene modificato in una delle colonne, la quantità di riempimento di <br> non è sufficiente e deve essere rivalutata.

#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.

C'è un modo per "terminare" elegantemente la prima colonna e dire al browser di avviare il resto del contenuto nelle colonne successive?

Answer 1

5. Column breaks

Quando il contenuto è disposto in più colonne, il programma utente deve determinare dove sono collocati interruzioni di colonna. Il problema della rottura del contenuto di in colonne è simile alla suddivisione del contenuto in pagine.

tre nuove proprietà vengono introdotti per consentire interruzioni di colonna da descritte nelle stesse proprietà come interruzioni di pagina: ‘break-before’, ‘break-after’, e ‘break-inside’. Queste proprietà prendono gli stessi valori di come "page-break-before", "page-break-after" e "page-break-inside" [CSS21]. Inoltre, vengono aggiunti alcuni nuovi valori della parola chiave .

Queste proprietà descrivono il comportamento di interruzione pagina/colonna prima/dopo/all'interno della casella generata. Questi valori sono normatively definito [CSS21]:

• auto: né forza né vietano un'interruzione di pagina/colonna prima (dopo, dentro) la casella generato.
• always: forzare sempre un'interruzione di pagina prima (dopo) della casella generata.
• avoid: evitare un'interruzione di pagina/colonna prima (dopo, all'interno) della casella generata.
• left: Forza una o due interruzioni di pagina prima (dopo) della casella generata in modo che la pagina successiva sia formattata come pagina sinistra.
• right: Forza una o due interruzioni di pagina prima (dopo) della casella generata in modo che la pagina successiva sia formattata come pagina destra.

Questa specifica aggiunge i seguenti nuovi valori:

• page: forzare sempre un'interruzione di pagina prima (dopo) del riquadrato generato.
• column: forzare sempre un'interruzione di colonna prima (dopo) della casella generata.
• avoid-page: evitare un'interruzione di pagina prima (dopo, all'interno) della casella generata.
• avoid-column: evitare un'interruzione di colonna prima (dopo, all'interno) della casella generata.

Pertanto, si potrebbe usare qualcosa come

#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>

Tuttavia, solo Internet Explorer 10+ e Opera 11,10-12,1 sembrano sostenere tali proprietà.

Answer 2

Utilizzare i tag <p> per distinguere tra i paragrafi.

<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> 

E il 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/

I <p> tag mantiene i paragrafi insieme, e il 'filler' (segnato in rosso) mantiene una zona priva di testo.

Answer 3

Se si è in grado di avvolgere ogni colonna in un div, la soluzione più elegante sarebbe quella di utilizzare una griglia di stile bootstrap.

.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>

Se si utilizza un wysiwyg per entrare copia, allora è necessario avere accesso a un tasto sorgente per avvolgere le colonne in div. Quindi usando il codice sopra, le colonne diventano molto semplici; e reso facilmente reattivo.

Answer 4

Per la vostra situazione, la soluzione migliore è utilizzare un sistema di rete. Si prega di eseguire lo snippet nella vista Pagina intera.

<!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

Un modo per affrontare questo sarebbe quello di avvolgere in realtà il testo in paragrafi (p tag), come si dovrebbe fare per la semantica così, e non permettere che la tua 2 ° comma, per rompere, dato che non è più lungo di 1 colonna.

Questo può essere ottenuto utilizzando la proprietà CSS break-inside. https://developer.mozilla.org/en/docs/Web/CSS/break-inside

Codice esempio, sulla base di frammento:

@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

Elaborando più @Oriol risponde, è possibile impostare la larghezza in modo prima colonna verrà sempre utilizzato metà sinistra.

#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

Tecnicamente non il più colonne CSS caratteristica ci si rivolge a colonna-break, ma questo sembra visivamente simili.

.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> 

Ecco il jsFiddle: http://jsfiddle.net/Vbr9d/242/