Pedir presupuesto

Ajusta tu lista ordenada al tamaño de la capa

Hoy voy a explicar como modificar capas para que se ajusten al tamaño deseado con Jquery y CSS. Pero para entender mejor lo que os quiero decir, mirar la imagen y lo entenderéis.

Ajustar tamaño al div

Como podéis ver, esto suele pasar mucho a la hora de hacer una página web con este estilo de «cajas» que tienen que ocupar todo el tamaño del div.

Para solucionar esto, explicaremos lo que hay que hacer:

HTML

Empezamos creando una lista desordenada:

[html]

[/html]

CSS

[CSS]
ul.column{
width: 100%;
padding: 0;
margin: 10px 0;
list-style: none;
}
ul.column li {
float: left;
width: 200px; /* width inicial */
padding: 0;
margin: 5px 0;
display: inline;
}
.block {
height: 355px;
font-size: 1em;
margin-right: 10px; /*Creamos un margen de 10 pixeles entre cada columna */
padding: 20px;
background: #e3e1d5;
}
.block h2 {
font-size: 1.8em;
}
.block img {
/*Tamaño de imagen flexible con borde*/
width: 89%; /*Mantener el 1% fuera del width para prevenir del bug de IE6*/
padding: 5%;
background:#fff;
margin: 0 auto;
display: block;
-ms-interpolation-mode: bicubic; /*Prevenir la pixelación de la imagen para IE6/7*/
}
[/CSS]

Jquery

[JAVASCRIPT]
function smartColumns() { //Create a function that calculates the smart columns

//Reset column size to a 100% once view port has been adjusted
$(«ul.column»).css({ ‘width’ : «100%»});

var colWrap = $(«ul.column»).width(); //Get the width of row
var colNum = Math.floor(colWrap / 200); //Find how many columns of 200px can fit per row / then round it down to a whole number
var colFixed = Math.floor(colWrap / colNum); //Get the width of the row and divide it by the number of columns it can fit / then round it down to a whole number. This value will be the exact width of the re-adjusted column

$(«ul.column»).css({ ‘width’ : colWrap}); //Set exact width of row in pixels instead of using % – Prevents cross-browser bugs that appear in certain view port resolutions.
$(«ul.column li»).css({ ‘width’ : colFixed}); //Set exact width of the re-adjusted column

}

smartColumns();//Execute the function when page loads

$(window).resize(function () { //Each time the viewport is adjusted/resized, execute the function
smartColumns();
});
[/JAVASCRIPT]

Ejemplo Smart Columns

Podeis ver la demo de como quedaria.

Vía: Sohtanaka – Smart Columns Css Jquery

¿Te ha gustado?, Comparte!!

Compartir en facebook
Compartir en twitter
Compartir en linkedin
Compartir en whatsapp
Compartir en email

Un comentario

  1. Curioso, aunque no se si me convence, ami almenos me va algo lento, si fuese mas fluida la recolocación de los objetos me llamaria mas la atención, de todas formas no me gustan mucho las webs liquidas ^^U. Aun así la entrada es interesante.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

¡Pide tu presupuesto!

Completa los campos para poder enviarte un presupuesto

Todos y tu presupuesto son a medida y totalmente personalizados, entendemos que dos proyectos online no pueden ser iguales y que cada cliente tiene unos objetivos y necesidades muy diferentes, es por eso que para elaborar un presupuesto, necesitamos saber de ti, tu proyecto y objetivos.

Los campos marcados con (*) son obligatorios.

La comunicación enviada quedará incorporada a un fichero del que es responsable COLORDEU. Esta comunicación se utilizará exclusivamente para tratar sus datos para atender su solicitud, siempre de acuerdo al Reglamento (UE) 2016/679 (RGPD), la Ley Orgánica 15/1999 (LOPD) y el Real Decreto 1720/2007 de desarrollo de la LOPD), sobre protección de datos. Sus datos no se comunicarán a terceros, excepto por obligación legal, y se mantendrán mientras no solicite su cancelación. En cualquier momento usted puede ejercer los derechos de acceso, rectificación, portabilidad y oposición, o si procede, a la limitación y/o cancelación del tratamiento, comunicándolo por escrito, indicando sus datos personales mediante un email a hola@colordeu.es