javascript - una - tamaño de columnas css
¿Puedo establecer un salto de columna en un diseño de varias columnas CSS? (7)
5. Saltos de columna
Cuando el contenido se presenta en varias columnas, el agente de usuario debe determinar dónde se colocan los saltos de columna. El problema de dividir el contenido en columnas es similar a dividir el contenido en páginas.
Se introducen tres nuevas propiedades para permitir que los saltos de columna se describan en las mismas propiedades que los saltos de página: '' break-before '', '' break-after '' y '' break-inside ''. Estas propiedades toman los mismos valores que ''page-break-before'', ''page-break-after'' y ''page-break-inside'' [CSS21] . Además, se agregan algunos nuevos valores de palabras clave.
Estas propiedades describen el comportamiento del salto de página / columna antes / después / dentro del cuadro generado. Estos valores se definen normativamente en [CSS21] :
auto: no forzar ni prohibir un salto de página / columna antes (después de, dentro) del cuadro generado.always: forzar siempre un salto de página antes (después) del cuadro generado.avoid: evite un salto de página / columna antes (después, dentro) del cuadro generado.left: fuerza uno o dos saltos de página antes (después) del cuadro generado para que la página siguiente se formatee como una página izquierda.right: fuerza uno o dos saltos de página antes (después) del cuadro generado para que la página siguiente se formatee como una página derecha.Esta especificación agrega los siguientes nuevos valores:
page: forzar siempre un salto de página antes (después) del cuadro generado.column: forzar siempre un salto de columna antes (después) del cuadro generado.- Avoid
avoid-page: evita un salto de página antes (después, dentro) del cuadro generado.avoid-column: evita un salto de columna antes (después, dentro) del cuadro generado.
Por lo tanto, podrías usar algo como
#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>
Sin embargo, solo Internet Explorer 10+ y Opera 11.10-12.1 parecen admitir esas propiedades.
Tengo un gran párrafo de texto que fluye en un diseño de columnas múltiples de CSS que se extiende, digamos, dos, tres o cuatro columnas usando el hibrido de CSS . En algún momento, uno de los textos de la columna debe terminar antes para que el resto del párrafo comience en la parte superior de la segunda columna.
¿Hay alguna manera de que podamos simplemente establecer un <column-break> para comenzar el resto del texto en la parte superior de la siguiente columna?
Actualmente estoy rellenando la columna (que necesita el salto de columna) con una gran cantidad de <br> s para alargar la columna en HTML para lograr el efecto.
Además, cada vez que se cambia algo en cualquiera de las columnas, la cantidad de relleno de relleno se queda corta y debe ser reevaluada.
#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>
¿Hay alguna forma de "finalizar" la primera columna con elegancia y decirle al navegador que inicie el resto del contenido en las siguientes columnas?
Al elaborar más en la respuesta de @Oriol, puede establecer el ancho para que la primera columna siempre use la mitad izquierda.
#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>
Para su situación, la mejor solución es utilizar un sistema de red. Ejecute el fragmento en la vista de página completa.
<!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>
Si puede envolver cada columna en un div, entonces la solución más elegante sería utilizar una cuadrícula de estilo 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>
Si está utilizando un wysiwyg para ingresar una copia, debe tener acceso a un botón de origen para ajustar sus columnas en divs. Luego, utilizando el código anterior, las columnas se vuelven muy simples; y fácilmente responsive.
Técnicamente no es la característica de columnas múltiples de CSS a la que se dirige el ingreso de columnas, pero esto parece visualmente similar.
.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>
Aquí está el jsFiddle: http://jsfiddle.net/Vbr9d/242/
Una forma de abordar esto sería realmente envolver su texto en párrafos (etiquetas p ), como también debería hacer para la semántica, y no permitir que su segundo párrafo se rompa, dado que nunca es más largo que 1 columna.
Esto se puede lograr mediante el uso de la propiedad CSS intrínsecamente. https://developer.mozilla.org/en/docs/Web/CSS/break-inside
Ejemplo de código basado en su fragmento:
@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>
Use las etiquetas <p> para distinguir entre párrafos.
<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>
Y el 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/
Las etiquetas <p> mantienen los párrafos juntos, y el ''relleno'' (marcado en rojo) mantiene un área libre de texto.