Pergunta

Eu esperava que as duas tags span no exemplo a seguir fossem exibidas uma ao lado da outra; em vez disso, elas eram exibidas uma abaixo da outra.Se eu definir a largura da classe span.right para 49%, eles serão exibidos um ao lado do outro.Não consigo descobrir por que o vão direito é empurrado para baixo, como se o vão direito tivesse algum preenchimento/margem invisível que faz com que demore mais de 50%.Estou tentando fazer isso sem usar tabelas HTML.Alguma ideia?

<html>
<head>
    <title>Test Page</title>
    <style type='text/css'>
        * {
            margin: 0;
        }

        html,body{
            margin:0;
            padding:0;
            height:100%;
            width:100%;
            border:none;
        }

        div.header{
            width:100%;
            height:80px;
            vertical-align:top;
        }

        span.left {
            height:80px;
            width:50%;
            display:inline-block;
            background-color:pink;
        }

        span.right {
            vertical-align:top; 
            display:inline-block;
            text-align:right;
            height:80px;
            width:50%;
            background-color:red;
        }
    </style>
</head>
<body>
    <div class='header'>
        <span class='left'>Left Span 50% width</span>
        <span class='right'>Right Span 50% width</span>
    </div>
</body>
</html>

Obrigada pelo esclarecimento.O float:left funciona perfeitamente com os resultados esperados no FF 3.1.Infelizmente, no IE6, o intervalo do lado direito renderiza 50% dos 50%, dando-lhe, na verdade, uma largura de 25% da janela do navegador.Definir sua largura para 100% atinge os resultados desejados, mas quebra no FF 3.1, que está em modo de conformidade com os padrões e eu entendo isso.Fazer funcionar tanto no FF quanto no IE 6, sem recorrer a hacks ou usar múltiplas planilhas CSS tem sido um desafio

Foi útil?

Solução 

float: left;

Tente adicionar isso ao span.left

Isso fará com que flutue para a esquerda (conforme sugerido pela sintaxe).

Eu não sou um especialista em CSS de forma alguma, então, por favor, não tome isso como um fato indiscutível, mas acho que quando algo flutua, não faz diferença na posição vertical das coisas abaixo dele.

Se você flutuar o span.right para a direita e adicionar texto abaixo deles, você deverá obter alguns resultados interessantes. Para interromper esses "resultados interessantes", você pode usar "clear:esquerda/direita/ambos" o que fará com que o bloco com o estilo claro fique abaixo de qualquer coisa flutuada para a esquerda/direita/ambos. Escolas W3 tenha uma página nesta propriedade também.

E bem-vindo ao Stackoverflow.

Outras dicas

Isso ocorre porque inline e inline-block incluem espaços em branco (no seu caso, a quebra de linha) entre os elementos.No seu caso, a largura combinada dos elementos é 50%+50%+espaço em branco > 100%.

Você deve colocar os dois elementos na mesma linha do seu documento HTML (sem espaço)

<div class='header'>
    <span class='left'>Left Span 50% width</span><span class='right'>Right Span 50% width</span>
</div>

Ou use comentários HTML

<div class='header'>
        <span class='left'>Left Span 50% width</span><!--
     --><span class='right'>Right Span 50% width</span>
</div>

Eu mesmo prefiro o último.

Não gosto desse hack, mas parece funcionar tanto no Firefox quanto no IE6:

span.right {
  vertical-align:top; 
  display:inline-block;
  text-align:right;
  height:80px;
  width:50%;
  *width:100%;
  background-color:red;
}

Note o *width: 100% que parece satisfazer os requisitos do IE6 e é ignorado pelo Firefox.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top