elementos nível de bloco dentro de display: inline-block

StackOverflow https://stackoverflow.com/questions/608172

  •  03-07-2019
  •  | 
  •  

Pergunta

Eu estou tentando colocar alguns (verticalmente-empilhados) display: elementos de bloco dentro de um display: elemento inline-block. De acordo com a especificação CSS, o elemento inline-bloco deve ser um bloco contendo, por isso pode ter display:. Elementos de bloco dentro dele e os que não deve afetar o resto do layout

No entanto, os display: elementos de bloco dentro do display: elementos inline-bloco perturbar o resto da página; o mesmo acontece com nada dentro do inline-block, ou mesmo um elemento básico como um parágrafo; apenas texto simples evita a interrupção do resto da página (por interrupção Quero dizer deslocando outros divs para baixo, por exemplo, neste caso, o Bloco de Esquerda se move para baixo vermelha uma linha e tem um espaço em branco acima dela). Eu estou usando o Firefox 3.0.6. 

<html><head><style type="text/css">
#left {
  display: inline-block;
  background: red;
  width: 20%;
  height: 100%;
}
#right {
  display: inline-block;
  background: green;
  width: 80%;
  height: 100%;
}
</style></head><body>
  <div id="left">Left</div><div id="right">Right</div>
</body></html>

Os shows acima como dois painéis, deixou vermelho, verde direito, como esperado. Se eu mudar "direito" de 

<p>Right</p>

ou removê-lo totalmente, ou (como eu quero fazer) substituí-lo por um par de divs, fico com a má formatação.

Este é um bug do Firefox, ou estou fazendo algo errado, ou são as minhas expectativas incorreta? (FWIW, IE 7 mangles-los todos igualmente, como se ele não entende inline-block; não importa, este é um aplicativo interno e eu só estou usando o Firefox.). Eu posso ser capaz de obter o layout que eu quero usar float / margem, mas eu prefiro não ter que fazer isso.

Foi útil?

Solução

Bem display: inline-block pode ser um pouco complicado para conseguir cross-browser. Ele vai exigir no mínimo, alguns hacks e, para o Firefox 2, potencialmente um elemento extra.

CSS 

.inlineBlock { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; }

display: -moz-inline-stack é para Firefox 2. Todos os filhos imediatos precisa ter display: block ou não ser elementos nível de bloco. Observação: Se você precisa de seu elemento inline-block a encolher embrulhar Eu acho que você pode usar display:. -Moz-inline-box em vez

zoom: 1 dá hasLayout ao elemento (para o IE 7 e abaixo). Parte 1 do hack necessário para IE7 e abaixo compatibilidade.

** display:. Embutido * é uma segunda parte corte do corte necessário para IE7 e abaixo compatibilidade

Eu ocasionalmente precisa adicionar overflow:. Escondida para compatibilidade IE assim

Para a sua situação específica eu acho que o que você precisa é: 

<html><head><style type="text/css">
#left {
  display: inline-block;
  background: red;
  width: 20%;
  height: 100%;
  vertical-align: top;
}
#right {
  display: inline-block;
  background: green;
  width: 80%;
  height: 100%;
  vertical-align: top;
}
</style></head><body>
  <div id="left">Left</div><div id="right"><p>Right</p><p>Right 2</p></div>
</body></html>

Outras dicas

Eu recebo a má formatação.

Você está sendo mordido por margem colapso , um CSS 'esperteza', que é uma dor tão frequentemente como é uma benção. A margem do

cai para fora, para tornar-se uma margem superior no inline-block; este se comporta depois como uma margem faria em um elemento ‘inline’ faria, empurrando o vertical-alinhamento da linha de texto para fora.

Você pode impedir que isso aconteça, removendo as margens de elementos ‘P’ e usando preenchimento vez. Alternativamente colocar um elemento não-vazia, sem margem superior na parte superior do bloco e uma sem margem inferior na parte inferior.

Este é um bug do Firefox

Eu acho que possivelmente sim, de acordo com o spec:

Margens de elementos inline-block não entrar em colapso (nem mesmo com seus filhos em fluxo).

inline-block Este valor faz com que um elemento para gerar um contentor de bloco de nível em linha. O interior de um bloco de linha é formatada como uma caixa de bloqueio, e o elemento propriamente dito é formatada como uma caixa de nível em linha atómica. modelo de processamento visual

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