web-dev-qa-db-ja.com

CSS-calc（）を使用して要素の幅を同じに保ちます

CSSではこのようなことが可能ですか？

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

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

Divは常にelementOneと同じ幅になります。

CSSにそのような機能があり、calc（）または他の手段を使用していますか？

htmlcsscss3calc
11
Marc M.

いいえ、CSSでは不可能です。

そのためには、JavaScript（document.getElementById(elementOne).offsetWidthなど、探している幅に応じて）を使用する必要があります。 Calcは、スクリプトを実行するのではなく、数学を実行するための sed です。あなたがやろうとしているように、CSSステートメントにJSを入れる方法はありません。

JSビットの詳細については、「 HTML要素の実際の幅と高さを取得する方法は？ 」を参照してください。

編集：これがCSSに実装するのが悪い考えである理由の背景については、se CSSの値の計算 （TL; DR：試されました。物事は爆発しました）

10
leo

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>

Calc（）関数で変数を使用することもできます。

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

はい。 CSSを使用してこれを行うには、2つの方法があります（ただし、calcを使用しない場合）。

1）列の数がわかっている場合は、％を使用します（つまり、2列で50％）

2）列の数がわからない場合、または使用ケースに％を使用できない場合は、 flexbox を使用できます。ブラウザの互換性ターゲットに応じて、「古い」構文と「新しい」構文を組み合わせて、素晴らしい結果を得ることができます。

0
Manatax