html - 彼此相邻的 float div

Question

我正在尝试在我网站的列表标签内创建以下位置

这是我的代码:

<li>
    <a href="http://www.example.com/test/">
        <div class="bt-thumb" style="float:left;background: url(http://www.example.com/wp-content/uploads/2016/09/bg1.jpg) no-repeat center center / cover, #333"></div>
    </a>
    <h6 class="">
        <a href="http://www.example.com/test/">Test Post</a>
    </h6>
    <div class="">
        <span>Sep 29, 2016</span>
        <span>By Admin</span>
    </div>
</li>

但我只是让每个元素堆叠在彼此之上 任何帮助将不胜感激。

谢谢

Answer 1

首先是 html 标记，将元素相互包裹的方式很糟糕……把它放在一边……这是您所要求的最低工作版本。

.bt-thumb {
  display: inline-block;
  float:left;
  width: 200px;
  height: 200px;
  margin: 10px;
}

http://codepen.io/anon/pen/kkZkJq