Beste Möglichkeit, 1/3 von 100% in CSS darzustellen?

Ich habe eine große <div>mit drei kleinen <div>darin, inline. Sie haben jeweils eine Breite von 33%, aber das verursacht einige Ausrichtungsprobleme, da 3 * 33%! = 100%. Was ist der beste Weg, um ein perfektes Drittel in CSS wie diesem darzustellen? Vielleicht nur 33,33%?

Nun , da calcwird weitgehend unterstützt unter den modernen Browsern können Sie verwenden:

#myDiv {
    width: calc(100% / 3);
}

Oder Sie können dies als Fallback verwenden, wenn Ihr Browser dies nicht unterstützt:

#myDivWithFallback {
    width: 33.33%;
    width: calc(100% / 3);
}

Berücksichtigen Sie Margen? Sie könnten 30% pro Spalte mit 5% Rand auf beiden Seiten der mittleren Spalte erreichen.

Schnelles Beispiel

.col_1_3 {
    width: 33%;
    float: left;
}

.col_1_3:nth-of-type(even) {
    width: 34%;
}

Der Bildschirm mit der höchsten Auflösung ist ein NEC-LCD-Bildschirm ohne Produktion mit einer Auflösung von 2800 x 2100. Selbst bei dieser Größe entspricht ein Pixel 0,0357% der Bildschirmbreite. Sollte 33.33%also nah genug sein, bis 5.000 Pixel breite Bildschirme zur Norm werden.

John Resig hat jedoch einige Untersuchungen zur Rundung von Subpixeln in verschiedenen Browsern durchgeführt. Abhängig von Ihren drei Spalten, die genau der Breite des Bildschirms entsprechen, hat dies möglicherweise nie eine perfekte Lösung.