Comunidad de diseño web y desarrollo en internet online

funcion calc() para margin?

Citar            
MensajeEscrito el 16 Oct 2015 02:01 pm
hola amigos quiero hacerles una pregunta:
es posible usar la funcion calc() de ccs3 para calcular el margen superior e inferior de un div?
en mi caso tengo una caja de un alto de 350px y un ancho de 900px dentro de esta caja se alojan cuatro cajas con un ancho fijo pero un alto variable dependiendo del contenido, el contenido obviamente es dinamico y contiene varias cajas y texto por lo que no tengo exito en calcularlo.
el punto es que deseo e estas cajas queden alineadas en el alto con respecto a un centro
seria algo asi como que el margin-top == al alto de la caja contenedora menos el alto de esta caja dividido 2
osea

Código CSS :

#cajagrande{
height:350px;
}
.cajasChicas{
margin-top: calc(350px - height/2);
margin-bottom: calc(350px - height/2);
}

sin embargo como sabran esto no funciona

Código HTML :

<div id="cajagrande">
   <div class="cajaChica"></div>
   <div class="cajaChica"></div>
   <div class="cajaChica"></div>
   <div class="cajaChica"></div>
</div>


podrian ayudarme por favor?

Por JaVIChO

18 de clabLevel



 

firefox
Citar            
MensajeEscrito el 16 Oct 2015 08:39 pm
Tienes dos errores de concepto. El calc() de CSS no acepta "height" como parte de una expresión simplemente porque no es un número. La función no se implementó para tomar el valor actual de alguna otra propiedad CSS, solamente números. Aunque puedes usar diferentes unidades (px, % o em, etc...).

Por otro lado, si usas el margin-top del elemento contenido para posicionarlo dentro de su contenedor, no va a funcionar, porque harás que el contenedor "se mueva" hacia arriba para "hacer espacio" al contenido.

Mejor usa JavaScript para logar lo que buscas.

Por DriverOp

Claber

2510 de clabLevel



 

chrome
Citar            
MensajeEscrito el 17 Oct 2015 12:58 pm
Hola, muchas gracias por contestar.
te cuento que en realidad lo resolvi justamente de esa manera el dia de ayer
lo que hice fue un javascript que cuando esta cargada la pagian completa re calcula las dimenciones de cada caja y entonces recalcula el margin superior e inferior
este seria el codigo
[script]
$(window).load(function(){
// ALINEAR VERTICALMENTE LOS CUADROS
$(".recuadroBuscar1").each(function(){ // recorre toda la clase recuadroBuscar1
var valor;
$(this).css("height", function(index, value){ // value debuelve un numero mas la medida osea 130px
value = (value + '').replace(/[^0-9]/g, ''); // eliminamos todo menos los numeros
valor = (350-parseInt(value))/2; la caja contenedora mide 350 menos la caja dividido 2
valor = parseInt(valor)+"px"; // agregamos el la unidad de medida
$(this).css({'margin-top':''+valor+''}); //modificamos
$(this).css({'margin-bottom':''+valor+''});
});
});
});
[/script]

de todas formas te agradesco mucho por tu respuesta!

Por JaVIChO

18 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.