CSS内联块封装问题与混合文本和空div [英] CSS inline-block wrap issue with mixed text and empty div

问题描述

如果 display：inline-block ，我有一个 div 设置。请参阅下面的示例：

I have an alignment problem of divs (mixed empty or with text) when display: inline-block is set. See the following image for an example:

你可以看到， div 与文本不符合 div 的其余部分。请参阅 this JSFiddle了解我的问题的工作示例。

As you can see, the divs with the text somehow are not aligned with the rest of the divs. See this JSFiddle for a working example of my problem.

我已经知道一些方法来解决这个问题，但我想知道为什么会发生。我的目标是以最小的CSS更改（可能没有HTML修改）解决此问题。

I already know some ways for fixing this problem but I want to understand why it happens. My goal is to solve this issue with minimal CSS changes (possibly with no HTML modification).

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

推荐答案

vertical-align ，每个文字都有。它有初始值 baseline ，因此方向是在基线上。

The reason is the default value of vertical-align, which every text has. It has the initial value baseline and thus the orientation is on baseline.

最简单和最聪明的解决方法是将其设置为 vertical-align：top; ：

The easiest and smartest way to fix it is to set it to vertical-align: top;:

.actor {
    vertical-align: top;
}

演示： JSFiddle

这篇关于CSS内联块封装问题与混合文本和空div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！