web-dev-qa-db-fra.com

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

J'ai expérimenté un moyen de faire en sorte qu'un élément de page chevauche les éléments de chaque côté et reste parfaitement centré entre eux. Ma solution a été de déclarer position:relative et de définir des valeurs margin négatives à peu près égales à 50% de la largeur de l'élément, mais le plus proche que j'ai pu obtenir est de diviser par deux le pourcentage de la largeur de l'élément parent:

<!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 solution CSS uniquement qui utilisera la largeur de l'élément lui-même, pas la largeur du conteneur. Je ne peux pas utiliser JavaScript pour cela, car je prévois de l'utiliser comme correctif MathJaX en l'intégrant dans une commande \style. (Pour autant que je sache, MathJaX ne fournit pas de code HTML ou JavaScript incorporé dans ses formules. Vous voyez donc pourquoi il doit s'agir uniquement de CSS. Je sais que c'est possible avec un script. Est-ce possible avec CSS, ou est-ce que je suis désespéré ?

Mise à jour: Grâce à une suggestion de @ Daiwei, je pense que je suis sur la route de 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'adorerais vous montrer les résultats, mais je ne peux pas télécharger une photo. Pardon.

Autre mise à jour: la solution que j'ai présentée ci-dessus fonctionne mieux dans un contexte HTML/CSS, mais elle tombe dans un environnement MathJaX array, matrix ou similaire. Spécifiquement, si l'élément est trop long, il se clipse du côté gauche. Le positionnement relatif déplace l'élément à mi-chemin vers la gauche mais laisse un espace béant où il était! Des idées pour le réparer?

javascripthtmlcssmathjax
18
Brian J. Fink

J'ai vu une astuce moderne pour centrer des éléments en utilisant transform. (Si je comprends la question sous-jacente)

element {
  position:relative;
  top:50%; // ^1
  transform:translateY(-50%); // ^2,3
}
  1. Vous pouvez utiliser top:50%; pour vertical et left:50%; pour horizontal.
  2. Vous utiliseriez ensuite translateY(-50%) pour vertical et translateX(-50%) pour un centrage horizontal.
  3. Vous devez utiliser des préfixes pour transform. Je recommande fortement autoprefixer dans votre flux de travail.

Prime:
Vous pouvez également utiliser cette astuce pour aligner des éléments en bas ou à droite de son parent, comme dans un table-cell en utilisant 100% au lieu de 50% dans le fichier CSS.

46
Jason Lydon

Comme la taille de l'élément n'est connue qu'après le style, comment le style doit-il pouvoir être utilisé? Imaginez ceci: Certains éléments ont une largeur de 200% de leur propre largeur (= taille double que "normale") définie dans CSS. La largeur de l'un de ses enfants est définie à 100% du parent (= 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 est aussi large que l'élément lui-même. Notre élément n'a pas encore de largeur, car nous attendons qu'il obtienne des valeurs par défaut pour pouvoir doubler ce nombre. Résultat: rien n'aura jamais de largeur.

Par conséquent: Ce que vous essayez de faire n'est pas possible. Mais CSS3 a sa calc , peut-être que vous pouvez vous rapprocher de ce que vous voulez réaliser avec?

0
Johannes H.

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

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

Pour le moment, la fonction attr ne fonctionne pas dans Chrome. Cela aurait été agréable… .. Mais vous pouvez utiliser des variables si vous définissez vous-même l'attribut parent ou si vous pouvez utiliser un attribut prédéfini. De cette façon, vous pouvez utiliser la fonction calc () pour calculer votre attribut enfant.

Voici un exemple, en utilisant la taille de la fenêtre définie par le navigateur, 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>

Cela peut être utilisé de nombreuses manières intéressantes pour rationaliser votre CSS. Par exemple avec le style @media ... 

0
Simon Rigét

Je ne sais pas si c'est ce que vous vouliez 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
Daiwei