html - 向左浮动和内联 block 仅适用于某些元素

Question

我正在尝试使用内联/内联 block 来获得简单的两行布局，但它不适用于我的第三个元素。我希望顶行有三张图片，底行在每张图片下方都有文本所属的文本。有人可以解释我做错了什么吗？

.floatL {
  float: left;
}

.box div {
  display: inline-block;
}

<div class="box">

  <div class="floatL">
    <img src="dog1.jpg" alt="Picture of a Dog" width="100" height="100">
    <p>Something about the dog</p>
    </img>

  </div>

  <div class="floatL">
    <img src="cat1.jpeg" alt="Picture of a Cat" width="100" height="100">
    <p>Something about the dog</p>
    </img>
    <div class="floatL">

      <img src="colors1.jpg" alt="Picture of Colors" width="100" height="100">
      <p>Something about the dog</p>
      </img>

    </div>

  </div>

Answer 1

正如@Johannes 所说，第三个 float 元素是嵌套的。

你需要适本地缩进，你会更容易捕捉到这些。

此外，您不要在 img 上使用结束标记。

查看此 fiddle重构您的代码。