O que acontece com o 1px restante quando um div com uma largura ímpar é dividido em 50% / 50%?

9

Digamos que eu queira criar um plano de fundo para div#wrapper , para que metade seja azul e metade seja vermelho usando dois divs com width:50% , assim:

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

Aqui está um violino para o exemplo acima.

Isso teoricamente resolveria a tarefa. No entanto, se o wrapper tivesse uma largura contendo um número ímpar de pixels, o que aconteceria com o 1px restante?

Por exemplo, se a largura do wrapper fosse alterada para 101px, então #leftSide teria 50px de largura e #rightSide teria 50px de largura, presumivelmente deixando uma linha branca vertical de 1px no meio.

Como os navegadores costumam renderizar isso? Um dos lados absorverá o 1px restante? E, em caso afirmativo, qual seria a melhor abordagem pura de CSS para contornar isso? Minha primeira inclinação seria definir o plano de fundo do invólucro para vermelho ou azul, mas existem outras abordagens?

    
por JSW189 26.07.2012 в 18:02
fonte

2 respostas

6

Veja o link .

No IE e no Firefox, o lado direito ocupa o pixel extra. No Chrome, há realmente uma lacuna entre os dois.

Definir o plano de fundo do contêiner parece ser a melhor maneira de resolver isso.

    
por Jacob 26.07.2012 / 18:11
fonte
-1

Uma possível solução não está definida como uma largura para o segundo DIV ( #rightSide ) e defina float: left; apenas na esquerda DIV . Como esses são elementos de bloco, eles sempre serão expandidos para a largura total disponível se nenhum tiver sido definido.

No exemplo, a largura do wrapper é 3px, o contêiner esquerdo tem uma largura de 1-2px (dependendo do navegador) e o contêiner direito exigirá o espaço horizontal restante dentro do wrapper:

link

    
por feeela 26.07.2012 / 18:23
fonte