浮动左侧和内联块仅适用于某些元素

Question

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

.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所说，第三个浮动元素是嵌套的。

你需要正确地缩进，你会更容易地抓住它们。

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

有关代码的重构，请参阅此fiddle。

Answer 2

您的第三个.floatL元素位于第二个元素内部 - 在第三个元素的开头标记之前放置一个结束DIV标记。