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重构您的代码。