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

72

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

css

— AKor
quelle

4

Wirf einfach genug Dezimalstellen darauf, bis es unwahrscheinlich ist, dass jemand einen Desktop hat, der groß genug ist, um sig.figs für die Berechnung relevant zu machen.

— Marc B

3

Sie können keine Brüche angeben, daher sind 33,33% so ziemlich Ihre einzige Option.

— Meagar

4

Nützliche Informationen: Subpixel-Rendering-Probleme in CSS

— drudge

105

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);
}

— Nathan Chase
quelle

19

Vergessen Sie nicht den Fallback : .column-one-third { width: 33.33%; width: calc(100%/3); }. Auf diese Weise können Sie nicht berechnete Browser unterstützen.

— smets.kevin

1

Ich habe festgestellt, dass oft 6 Dezimalstellen erforderlich sind, um das genaue Drittel eines Div richtig zu berechnen. width: 33.333333%;

— Garconis

15

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

Schnelles Beispiel

— Marcel
quelle

8

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

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

— Bruno Canongia
quelle

1

.col_1_3 {Breite: 33,33%; float: left;} ist ein besserer Ansatz. Vielleicht etwas Box-Größe: Border-Box und etwas Polsterung.

— Bruno Canongia

4

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.

— Plutor
quelle

2

Dieses "Hoch" klingt für aktuelle Nichtproduktionsmonitore etwas niedrig. Dies sieht als aktuelle Technologie-Obergrenze etwas vernünftiger aus. en.wikipedia.org/wiki/Ultra_High_Definition_Television

— Marcel

1

Diese Antwort ist nicht sehr zukunftssicher

— Nauraushaun