utiliser la largeur de l'élément (pas celle des parents) pour le calcul ou le pourcentage en css, sans javascript

J'ai fait des expériences avec un moyen d'obtenir un élément de la page la superposition d'éléments sur chaque côté de lui et de rester parfaitement centrée entre eux. Ma solution a été de déclarer position:relative et négatif réglé margin valeurs à peu près égale à 50% de la largeur de l'élément, mais le plus proche que j'ai été en mesure, est à la moitié de celle de l'élément de pourcentage de l'un de ses parents largeur:

<!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>

J'essaie de trouver une CSS, la seule solution qui permettra d'utiliser la largeur de l'élément lui-même, et non pas la largeur du conteneur. Je ne peux pas utiliser JavaScript pour faire cela parce que j'ai l'intention de l'utiliser comme un MathJaX corrigé par son intégration dans un \style de commande. (Autant que je sache, MathJaX ne fournit pas pour l'embarqué HTML ou du code JavaScript à l'intérieur de ses formules, donc, vous voyez pourquoi ce doit être le CSS uniquement. Je sais que c'est possible avec l'utilisation de scripts. Est-il possible avec les CSS, ou est-ce mon effort désespéré?

Mise à jour: Grâce à une suggestion de @Daiwei, je pense que je suis sur la route vers la bonne solution. Merci pour toutes vos réponses. Voici le code révisé:

.clap {
 position:absolute;
 display:inline-block;
 transform: translate(-50%,0);
 color:#f00                      //for contrast 
}

J'aimerais vous montrer les résultats, mais je ne peux pas télécharger une photo. Désolé.

Une autre mise à jour: La solution que j'ai présenté ci-dessus fonctionne le mieux dans un HTML/CSS contexte, mais elle se brise dans une MathJaX arraymatrixou d'autres tableaux de l'environnement. Plus précisément, si l'élément est trop longue, il se clips sur le côté gauche. Le positionnement relatif déplace l'élément de transition vers la gauche, mais laisse un espace béant où il l'habitude d'être! Toutes les idées pour patcher?

source d'informationauteur Brian J. Fink

42

J'ai vu un moderne astuce pour centrer les éléments à l'aide de transform. (Si je suis la compréhension de la question sous-jacente)
```
element {
  position:relative;
  top:50%; //^1
  transform:translateY(-50%); //^2,3
}
```
1. Vous pouvez utiliser top:50%; vertical et left:50%; horizontal.
2. Ensuite, vous devez utiliser translateY(-50%) vertical et translateX(-50%) pour le centrage horizontal.
3. Vous devez utiliser des préfixes pour transform. Je recommande fortement autoprefixer dans votre flux de travail.
Bonus:

Vous pouvez également utiliser cette astuce pour aligner les éléments vers le bas ou à droite de celle du parent, comme dans un table-cell en utilisant 100% au lieu de 50% dans le css.

Je ne sais pas si c'est ce que tu voulais faire, mais voici une démo: 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);
}

0

Que la taille de l'élément n'est connue qu'après qu'il a été stylisé, comment le style sera en mesure de l'utiliser? Imaginez ceci: un élément a une largeur de 200% de sa propre largeur (=double de la taille de "normal") définie dans le CSS. L'un de ses enfants a sa largeur à 100% de la société mère (=notre élément). La largeur par défaut d'un élément est déterminée par son contenu. Le contenu de notre élément sont que la largeur de l'élément lui-même. Notre élément n'a pas de largeur toutefois, comme nous sommes en attente pour elle d'obtenir des valeurs par défaut, de sorte que nous pouvons doubler celle là. Résultat: Rien ne sera plus jamais obtenir toute la largeur.

Donc: Ce que vous essayez de faire n'est pas possible. Mais CSS3 a son calcpeut-être vous pouvez vous rapprocher de ce que vous voulez réaliser à l'aide?
0

"À l'aide de l'élément propre de la largeur pour le calcul ou le pourcentage" En général:

(Peut-être pas la meilleur solution pour votre problème, mais la réponse à votre question)

À l'heure actuelle,la fonction attr ne fonctionne pas sous Chrome. Cela aurait été bien.
Mais vous pouvez utiliser des variables, si vous définissez l'attribut parent vous-même, ou sont en mesure d'utiliser un prédéfini. De cette façon, vous pouvez utiliser le calc() fonction pour calculer votre enfant attribut.

Voici un exemple, en utilisant le navigateur défini la taille de la fenêtre, pour calculer la largeur d'un élément:
```
<!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>
```
Ceci peut être utilisé dans beaucoup de façons intéressantes, afin de simplifier votre CSS. Par exemple, avec les @media style...

Vous devez vous connecter pour publier un commentaire.