尽管有相同的CSS，为什么第三个框看起来比其他框低？

Question

所有框都是完全相同的CSS。唯一的区别是前两个有图像，第三个有文本。为什么会降低？

https://jsfiddle.net/1guxjmLe/3/

如果在中间，它甚至会显得更低：

https://jsfiddle.net/1guxjmLe/4/

HTML：

-Dfile.encoding=UTF-8

CSS：

<div class="content">
      <div class="photo">
        <picture>
            <source srcset="http://www.comune.roncade.tv.it/public/Image/servizi_uffici/casa.jpg" media="(min-width: 47.5625em)">
            <source srcset="http://www.comune.roncade.tv.it/public/Image/servizi_uffici/casa.jpg" media="(max-width: 47.5em)">
            <img srcset="http://www.comune.roncade.tv.it/public/Image/servizi_uffici/casa.jpg" alt="">
        </picture>
      </div>
      <div class="description">
        <span>
          This is
          some text
          in here
        </span>
      </div>
      <div class="photo">
        <picture>
            <source srcset="http://www.comune.roncade.tv.it/public/Image/servizi_uffici/casa.jpg" media="(min-width: 47.5625em)">
            <source srcset="http://www.comune.roncade.tv.it/public/Image/servizi_uffici/casa.jpg" media="(max-width: 47.5em)">
            <img srcset="http://www.comune.roncade.tv.it/public/Image/servizi_uffici/casa.jpg" alt="">
        </picture>
      </div>

    </div>

Answer 1

只需使用vertical-align:top：

.content .description,
.content .photo {
  vertical-align: top;
}

JSFiddle Demo

Answer 2

您需要将vertical-align: top;添加到.description和.photo，因为您已将这些<div>定义为内嵌块。

请参阅fiddle。