section - usando el ancho propio del elemento(no el padre) para el cálculo o el porcentaje en css, sin javascript
mark html tag (4)
"Uso del propio ancho del elemento para el cálculo o porcentaje" En general:
(Tal vez no sea la mejor solución para su problema, sino una respuesta a su pregunta)
Por el momento, la función attr no funciona en Chrome. Eso hubiera sido bueno. Pero puede usar variables, si establece el atributo principal usted mismo o puede usar uno predefinido. De esa manera puede usar la función calc () para calcular su atributo hijo.
Aquí hay un ejemplo, usando el tamaño de la ventana gráfica de visualización definida por el navegador, para calcular el ancho de un elemento:
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--module-size: 33vw;
}
.clap {
display:inline-block;
width: calc(var(--module-size) / 2);
color:#f00;
border: 1px solid;
}
</style>
</head>
<body>
<center>
<span style="display:inline-block">1234567890
<span class="clap">1234567890</span>
1234567890</span>
</center>
</body>
Esto se puede usar de muchas maneras interesantes, para agilizar su CSS. Por ejemplo, con el estilo @media ...
He estado experimentando con una forma de hacer que un elemento de la página se superponga a ambos lados y se mantenga perfectamente centrado entre ellos. Mi solución fue declarar position:relative valores de margin negativos position:relative y establecidos aproximadamente igual al 50% del ancho del elemento, pero lo más cercano que he podido llegar es a la mitad del porcentaje del elemento del ancho de su padre:
<!DOCTYPE html>
<html>
<head>
<style>
.clap {
position:relative;
margin:auto -16.66%; // This element''s share of the entire parent''s width = 33.33%
color:#f00
}
</style>
</head>
<body>
<center>
<span style="display:inline-block">1234567890<span class="clap">1234567890</span>1234567890</span>
</center>
</body>
</html>
Estoy tratando de encontrar una solución solo para CSS que use el ancho del elemento en sí, no el ancho del contenedor. No puedo usar JavaScript para hacer esto porque planeo usarlo como una solución MathJaX incrustándolo en un comando /style . (Hasta donde sé, MathJaX no proporciona código HTML o JavaScript incrustado dentro de sus fórmulas, por lo que verá por qué esto debe ser solo para CSS. Sé que es posible con secuencias de comandos. ¿Es posible con CSS, o mi esfuerzo es imposible? ?
Actualización: gracias a una sugerencia de @Daiwei, creo que estoy en el camino hacia la solución correcta. Gracias por todas sus respuestas. Aquí está el código revisado:
.clap {
position:absolute;
display:inline-block;
transform: translate(-50%,0);
color:#f00 // for contrast
}
Me encantaría mostrarte los resultados, pero no puedo subir una foto. Lo siento.
Otra actualización: la solución que presenté funciona mejor en un contexto HTML / CSS, pero se rompe en una array MathJaX, una matrix o un entorno tabular similar. Específicamente, si el elemento es demasiado largo, se engancha en el lado izquierdo. ¡La posición relativa mueve el elemento a la mitad hacia la izquierda pero deja un espacio abierto donde solía estar! ¿Alguna idea para parchearlo?
Dado que el tamaño del elemento solo se conoce después de haber sido diseñado, ¿cómo podría el estilo utilizarlo? Imagina esto: algunos elementos tienen un ancho del 200% de su propio ancho (= tamaño doble que "normal") configurado en CSS. Uno de sus hijos tiene su ancho establecido en el 100% del padre (= nuestro elemento). El ancho predeterminado de un elemento está determinado por su contenido. Los contenidos de nuestro elemento son tan anchos como el elemento en sí. Sin embargo, nuestro elemento aún no tiene ancho, ya que estamos esperando a que se establezca un valor predeterminado, por lo que podemos duplicarlo. Resultado: Nada conseguirá ancho alguno.
Por lo tanto: lo que estás tratando de hacer no es posible. Pero CSS3 tiene su calc , ¿quizás pueda acercarse más a lo que quiere lograr usándolo?
He visto un truco moderno para centrar elementos usando la transform . (Si estoy entendiendo la pregunta subyacente)
element {
position:relative;
top:50%; // ^1
transform:translateY(-50%); // ^2,3
}
- Puedes usar
top:50%;para vertical eleft:50%;para horizontal. - A continuación, utilizaría
translateY(-50%)para vertical ytranslateX(-50%)para centrado horizontal. - Necesitas usar prefijos para la
transform. Recomiendo encarecidamente autoprefixer en su flujo de trabajo.
Prima:
También puede usar este truco para alinear elementos en la parte inferior o derecha de su padre, como en una table-cell usando 100% lugar de 50% en el css.
No sé si esto es lo que quería hacer, pero aquí hay una demostración: http://cdpn.io/bgkDf
HTML
<div class="container">
<div id="box-left"></div>
<div id="box-overlap">
<div id="box-overlap-inner"></div>
</div>
<div id="box-right"></div>
</div>
CSS
.container > div {
height: 50px;
float: left;
}
#box-left {
width: 40%;
background-color: red;
}
#box-right {
width: 60%;
background-color: green;
}
#box-overlap {
width: 0;
}
#box-overlap-inner {
position: relative;
z-index: 10;
height: 50px;
width: 50px;
transform: translate(-50%,0);
background-color: rgba(0,0,255,.5);
}