0

Tenho uma lista com 3 itens, todos os itens estão se comportando como inline-block, contudo, dei ao primeiro e a o último item float: right e float: left, respectivamente.

A pergunta é, por que o item do meio (box-2) não foi sobre posto pelo item da esquerda já que ele está em um novo contexto? Como continua sendo renderizado com background e tamanho de caixa?
Não era pra ele ser sopre posto pela box-1 ?

.caixa{
  width: 25%;
  height: 150px;
  display: inline-block;
}

.box-1{
  background: #F54958;
  float: right;
}

.box-2{
  background:#ED49F5;
  float: left;
}
.box-3{
  background: #EB5A46;  
}
<ul class="lista">
  <li class="caixa box-1">Primeiro</li>
  <li class="caixa box-2">Segundo</li>
  <li class="caixa box-3">Terceiro</li>
</ul>

0

1 Resposta 1

2

Acho que a sua dúvida talvez seja pq vc não entendeu o que seria o display: inline-block;... Inline-Block significa que o elemento é inline em relação aos irmãos, porém, por dentro ele se comporta como block.

Então por ter um outset de elemento inline ele respeita e segue o flow de texto, somo um span. Porem, o inset dele é block, ele pode receber propriedade de um elemento block como width e height.

Veja o caso do span mesmo

span {
  width: 100px;
  height: 100px;
  margin: 30px;
  background-color: red;
}

  
<span>inline</span>
<span style="display:inline-block">inline-block</span>

Essa pergunta tb pode te ajudar a entender algumas coisas relativas e float e inline-block Float vs. inline-block. Quais as vantagens e desvantagens de cada um?

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .