Cuanto más hemos visto blogs que brindan bastante información y que requieren de dos o varias columnas de texto para mostrarlo dentro de una sola entrada.
Si, ahora en esta entrada veremos como crear de dos hasta cinco columnas de texto.
Para llevar a cabo los ejemplos sigue los siguientes pasos:
Para obtener cada ejemplo de dos, tres, cuatro o cinco columnas incluye el CSS justo antes de línea ]]></b:skin> y el HTML dentro de una entrada.
Dos columnas de texto
CSS:
#columna1 {
position: absolute;
left:1%;
width:48%;
top:50px;
background-color:#DDD;
}
#columna2 {
position: absolute;
left:51%;
width:48%;
top:50px;
background-color:#DDD;
}
HTML:
<div id="columna1">Lorem 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, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div> <div id="columna2">Lorem 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, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>
Tres columnas de texto
CSS:
#columna1 {
position: absolute;
left:1%;
width:31%;
top:50px;
background-color:#DDD;
}
#columna2 {
position: absolute;
left:34%;
width:31%;
top:50px;
background-color:#DDD;
}
#columna3 {
position: absolute;
left:67%;
width:31%;
top:50px;
background-color:#DDD;
}
HTML:
<div id="columna1">Lorem 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, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div> <div id="columna2">Lorem 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, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div> <div id="columna3">Lorem 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, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>
Cuatro columnas de texto
CSS:
#columna1 {
position: absolute;
left:1%;
width:23%;
top:50px;
background-color:#DDD;
}
#columna2 {
position: absolute;
left:26%;
width:23%;
top:50px;
background-color:#DDD;
}
#columna3 {
position: absolute;
left:51%;
width:23%;
top:50px;
background-color:#DDD;
}
#columna4 {
position: absolute;
left:76%;
width:23%;
top:50px;
background-color:#DDD;
}
HTML:
<div id="columna1">Lorem 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, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div> <div id="columna2">Lorem 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, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div> <div id="columna3">Lorem 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, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div> <div id="columna4">Lorem 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, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>
Cinco columnas de texto
CSS:
#columna1 {
position: absolute;
left:1%;
width:18%;
top:50px;
background-color:#DDD;
}
#columna2 {
position: absolute;
left:21%;
width:18%;
top:50px;
background-color:#DDD;
}
#columna3 {
position: absolute;
left:41%;
width:18%;
top:50px;
background-color:#DDD;
}
#columna4 {
position: absolute;
left:61%;
width:18%;
top:50px;
background-color:#DDD;
}
#columna5 {
position: absolute;
left:81%;
width:18%;
top:50px;
background-color:#DDD;
}
HTML:
<div id="columna1">Lorem 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, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div> <div id="columna2">Lorem 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, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div> <div id="columna3">Lorem 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, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div> <div id="columna4">Lorem 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, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div> <div id="columna5">Lorem 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, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>
0
Para aumentar o reducir el ancho de cada una de las columnas varia las cifras
0
También podrás acercarlas o alejarlas de distancia
0
Además de cambiarle el color de fondo
#columna1 {
position: absolute;
left:1%;
width:48%;
top:50px;
background-color:#DDD;
}
#columna2 {
position: absolute;
left:51%;
width:48%;
top:50px;
background-color:#DDD;
}
