CSS - Verwenden von calc() zu halten, die breiten der Elemente, die der gleichen

Ist so etwas möglich in CSS?

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

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

So, dass das div-Element immer die gleiche Breite wie elementOne.

Gibt es so eine Funktion in CSS, mit calc() oder eine andere Möglichkeit?

  • Nein, es ist nicht so feature (AFAIK sowas wurde unterstützt in IE - bis zum version 7), aber Sie haben einen noch leistungsfähigeren feature: JavaScript.
  • Das nannte sich expression() im IE, und es war eine schlechte Idee: stackoverflow.com/questions/527861/...
InformationsquelleAutor Marc M. | 2014-04-15
  1. 10

    Nein, es ist nicht möglich, mit CSS.

    Für die, die Sie haben, JavaScript zu verwenden (document.getElementById(elementOne).offsetWidth oder ähnlich, je nach genau das, was Breite Sie sind auf der Suche nach). Calc ist verwendet Mathematik zu tun, nicht ausführen von Skripts. Es gibt keine Möglichkeit der Umsetzung JS in eine CSS-Anweisung, wie Sie zu tun versuchen.

    Für weitere Hilfe auf die JS-bit, siehe Wie Kriege ich ein HTML-element, wird die tatsächliche Breite und Höhe?

    Edit: Für einige Hintergrundinformationen, warum dies wäre eine schlechte Idee, das ganze in CSS, se Wert-Berechnung für CSS (TL;DR: Es wurde versucht. Dinge, die explodiert ist)

    InformationsquelleAutor leo
  2. 10

    Verwendung von CSS-Variablen:

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

    Können Sie auch Variablen verwenden, die in die calc () - Funktion:

    <div style="width: calc(var(--width) * 3); border: 1px solid;">Element four</div>
    • Seien Sie gewarnt, dass die CSS-Variablen werden nicht unterstützt sehr gut im IE und im Rand (und viele andere kleinere Browser); caniuse.com/#feat=css-variables
    • Heutzutage ist nichts im Vergleich zu DH 🙂 Es scheint zu funktionieren mit edge obwohl.
    InformationsquelleAutor Simon Rigét
  3. 0

    Ja. Es gibt 2 mögliche Wege dies zu tun, mit CSS (wenn auch nicht mit calc):

    1) Wenn Sie wissen, wie viele Spalten, die Sie haben, dann benutzen Sie einfach % (d.h. 50% für 2 cols)

    2) Wenn Sie nicht wissen, wie viele Spalten Sie haben, oder Sie vielleicht nicht verwenden können % für was auch immer verwenden-Fall Sie möglicherweise haben, dann können Sie flexbox.
    Je nach Ihren browser-Kompatibilität Ziel, kombinieren Sie die "alt" und "neu" - syntax, um einige tolle Ergebnisse.

    InformationsquelleAutor Manatax
Schreibe einen Kommentar