Nehmen wir an, ich wollte einen Hintergrund für div#wrapper erstellen, so dass die Hälfte blau und die Hälfte rot ist, indem zwei divs mit width:50% verwendet werden:
HTML:
%Vor%CSS:
%Vor%Hier ist eine Geige für das obige Beispiel.
Dies würde die Aufgabe theoretisch lösen. Wenn jedoch der Wrapper eine Breite mit einer ungeraden Anzahl von Pixeln hätte, was würde mit den verbleibenden 1px passieren?
Beispiel: Wenn die Breite des Wrappers auf 101 px geändert wurde, wäre #leftSide 50 px breit und #rightSide wäre 50 px breit, wodurch vermutlich eine 1 px vertikale weiße Linie in der Mitte verläuft.
Wie rendern Browser das normalerweise? Wird eine der Seiten die restlichen 1px absorbieren? Und wenn ja, was wäre der beste reine CSS-Ansatz, um dies zu umgehen? Meine erste Neigung wäre, den Hintergrund des Wrappers entweder rot oder blau zu setzen, aber gibt es andere Ansätze?
Eine mögliche Lösung ist keine Breite für das zweite DIV ( #rightSide ) und float: left; nur für das linke DIV . Da dies Blockelemente sind, werden sie immer auf die volle verfügbare Breite erweitert, wenn keine gesetzt wurde.
Im Beispiel ist die Wrapper-Breite 3px, der linke Container hat eine Breite von 1-2px (abhängig vom Browser) und der rechte Container benötigt den übrig gebliebenen horizontalen Platz im Wrapper: