Co dzieje się z pozostałym 1px, gdy div o szerokości nieparzystej jest dzielony 50% / 50%?

Question

Jul 26, 2012, 06:02 PM

Co dzieje się z pozostałym 1px, gdy div o szerokości nieparzystej jest dzielony 50% / 50%?

Powiedzmy, że chciałem stworzyć tłodiv#wrapper tak, że połowa jest niebieska, a połowa czerwona, używając dwóch divówwidth:50%, tak:

HTML:

<div id="wrapper">
    <div id="leftSide"></div>
    <div id="rightSide"></div>
</div>

CSS:

body, html, #wrapper {
    width: 100%;
    height: 100%;
}

#wrapper {
    background: white;
}

#leftSide, #rightSide {
    width: 50%;
    height: 100%;
}

#leftSide {
    float: left;
    background: blue;
}

#rightSide {
    float: right;
    background: red;
}

Oto skrzypce dla powyższego przykładu.

Teoretycznie rozwiązałoby to zadanie. Jeśli jednak opakowanie ma szerokość zawierającą nieparzystą liczbę pikseli, co stanie się z pozostałym 1px?

Na przykład, jeśli szerokość opakowania została zmieniona na 101px, to#leftSide miałby szerokość 50 pikseli i#rightSide miałby szerokość 50px, przypuszczalnie pozostawiając pionową białą linię 1px biegnącą w środku.

Jak zazwyczaj przeglądają to przeglądarki? Czy jedna ze stron pochłonie pozostałe 1 punkt? A jeśli tak, jakie byłoby najlepsze czyste podejście CSS do obejścia tego problemu? Moją pierwszą skłonnością byłoby ustawienie tła opakowania na czerwony lub niebieski, ale czy są inne podejścia?