Problema de quebra de linha em bloco CSS com texto misto e div vazio
Eu tenho um problema de alinhamento dediv
s (misturado vazio ou com texto) quandodisplay: inline-block
está definido. Veja a imagem a seguir para um exemplo:
Como você pode ver, odiv
s com o texto de alguma forma não estão alinhados com o resto dodiv
s. Vejoesta JSFiddle para um exemplo de trabalho do meu problema.
Eu já sei algumas maneiras de corrigir esse problema, mas quero entender por que isso acontece. Meu objetivo é resolver esse problema com alterações mínimas de CSS (possivelmente sem modificação de HTML).
HTML
<div class="bar">
<div class="actors">
<div class="actor" style="background-image: url('http://lorempixel.com/32/32/')"></div>
<div class="actor" style="background-image: url('http://lorempixel.com/32/32/')"></div>
<div class="actor num"><span>5</span></div>
<div class="actor" style="background-image: url('http://lorempixel.com/32/32/')"></div>
<div class="actor num"><div>6</div></div>
</div>
<div class="lol">lol</div>
</div>
CSS
.bar {
height: 40px;
border-bottom: 1px solid #000;
}
.actors {
float: left;
}
.actor {
display: inline-block;
width: 34px;
height: 34px;
background-color: gray;
border-radius: 16px;
border: 1px solid red;
}
.num {
}
.lol {
float: right;
}