dado unauto-disposición de 2 columnas por CSS?
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing...
</div>
es posible con CSS para generar un diseño de 2 o 3 columnas automáticamente, dicen especificando la altura del contenedor? Si no, ¿cuáles son las mejores prácticas en tal caso?
Gracias por su ayuda.
Al recibir comentarios sobre mi respuesta anterior, parece que he entendido mal lo que estaba buscando.
Si desea que el texto fluya automáticamente de una columna a otra entonces sus opciones son:
Personalmente, lo evitaría. En general, el contenido que fluye de una columna a la siguiente es bastante antipático.
El Floatutorial website tiene buenos ejemplos de buenas prácticas.
que romper de forma explícita a la página, donde la segunda columna debe comenzar. Desafortunadamente :( – Michael
Usted seguramente no podía girar la anterior en un diseño de 2 o 3 columnas, sin embargo, si usted tenía un recipiente y 3 divs, creando un diseño de 3 columnas sería tan simple como esto:
<div class="container">
<div class="col1">Column1</div>
<div class="col2">Column2</div>
<div class="col3">Column3</div>
</div>
Y el CSS:
.container{overflow:hidden; padding:20px; border:1px solid #ccc;}
.col1, .col2, .col3{width:200px;float:left;clear:none;margin:0 10px 0 10px;}
Esto crearía un diseño muy básico 3 columna con cada columna que tiene 10px de margen a cada lado. El contenedor div tiene 20 píxeles de relleno y un borde sutil.
Espero que esto te apunta en la dirección correcta.
lo que te hace seguro, que no hay forma de hacer esto? Cuando tienes textos largos, entonces la automatización de la ruptura de la página sería agradable. Pero tu ayuda es muy apreciada +1 votaciones – Michael
Mis Apolgies, entendí mal la pregunta entonces, me refiero a que NO se puede convertir un solo DIV en un diseño de 3 col a menos que tengas tramos o CUALQUIER otro elemento del bloque que puedas manipular a través de CSS. – SimonDowdles
Y supongo que podrías usar PHP (u otro idioma) para dividir el texto en trozos (a las longitudes de palabra definidas por el usuario) a continuación, insertar divisiones, estilo como columnas y reemplazar el texto en ellos, todo en el lado del servidor. Pero te aseguro que va a ser trivial. – SimonDowdles
Para este tipo de cosas me gustaría ver en el uso de un sistema de red tales como 960 o YUI
Ambos incluyen maneras de dividir las subsecciones en columnas.
He revisado rápidamente ambos, pero todavía no he encontrado la referencia explícita. Solo para estar seguro. : le da un texto como entrada (sin especificar dónde se debe romper), y le da un diseño de 2 columnas como salida? – Michael
Una gran sugerencia, uso el sistema de grilla 960 a menudo, y junto con el restablecimiento de CSS por Meyerweb (http://meyerweb.com/eric/tools/css/reset/), no puede fallar, incluso IE6 le da la bienvenida con los brazos abiertos! – SimonDowdles
@ Michael NO, aún tiene que definir manualmente la columna en su marcado como
que abarca CINCO cuadrículas de ancho, puede elegir un contenedor de 12 cuadrículas, 18, 24 etc. – SimonDowdlesSiempre se puede tomar el enfoque de jQuery, mira este artículo: http://www.mainelydesign.com/blog/view/auto-columns-columnizer-my-new-favorite-jquery-plugin
Gran complemento. El enlace al sitio del complemento real es http: //welcome.totheinter. net/columnizer-jquery-plugin/ –
El mejor plugin de columna jamás visto. –
Y, teniendo en cuenta que CSS3 aún no se utiliza tan ampliamente como nos gustaría pensar que es. La mayoría de su mercado de Internet todavía usa navegadores obsoletos. Ten cuidado. – SimonDowdles
Por lo tanto, "mal soportado" – Quentin
impresionante, gracias David. ahora si solo pudiera votar esto. Muy poca reputación :( – Michael