web-dev-qa-db-fra.com

CSS - Utilisez calc () pour conserver la même largeur d'éléments

Est-ce que quelque chose comme ceci est possible en CSS?

<table>
  <tr>
    <td id="elementOne">elementOne</td>
    <td id="elementtwo">elementtwo</td>
  </tr>
</table>

<div style="width: calc(document.getElementById(elementOne).width)"></div>

Pour que la div ait toujours la même largeur que elementOne. 

Existe-t-il une telle fonctionnalité dans CSS, utilisant calc () ou un autre moyen?

htmlcsscss3calc
10
Marc M.

Non, ce n'est pas possible avec CSS.

Pour cela, vous devrez utiliser JavaScript (document.getElementById(elementOne).offsetWidth ou similaire, en fonction de la largeur que vous recherchez). Calc est utilisé pour faire des maths, pas exécuter des scripts. Il n’ya aucun moyen de mettre JS dans une déclaration CSS, comme vous essayez de le faire.

Pour plus d'aide sur le bit JS, voir Comment récupérer la largeur et la hauteur réelles d'un élément HTML?

Edit: Pour expliquer pourquoi ce serait une mauvaise idée d’appliquer en CSS, se Calcul de la valeur pour CSS (TL; DR: c’est essayé. Les choses ont explosé)

10
leo

Utiliser des variables CSS:

<style>
:root { --width: 100px; } /* Set the variable --width */

table td{
  width: var(--width);    /* use it to set the width of TD elements */
  border: 1px solid;
}
</style>

<table>
  <tr>
    <td class="tab">elementOne</td>
    <td class="tab">elementtwo</td>
  </tr>
</table>

<!-- reuse the variable to set the width of the DIV element -->
<div style="width: var(--width); border: 1px solid;">Element three</div>

Vous pouvez également utiliser des variables dans la fonction calc ():

<div style="width: calc(var(--width) * 3); border: 1px solid;">Element four</div>
9
Simon Rigét

Oui. Il y a 2 façons possibles de faire cela avec CSS (mais pas avec calc):

1) Si vous savez combien de colonnes vous avez, utilisez simplement% (c.-à-d. 50% pour 2 colonnes)

2) Si vous ne savez pas combien de colonnes vous avez ou que vous ne pouvez peut-être pas utiliser% quel que soit le cas d'utilisation que vous avez, vous pouvez utiliser flexbox . En fonction de la cible de compatibilité de votre navigateur, vous pouvez combiner les syntaxes "ancienne" et "nouvelle" pour obtenir des résultats impressionnants.

0
Manatax