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()または他の手段を使用していますか?

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