浮动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

Answer 2

这是一个工作小提琴：https://jsfiddle.net/xc4ky1gj/2/

要指出的事情：

首先，根据图像的大小和文字的数量，有很大的机会，你的浮动图像会比里面的内容大。您需要在容器中添加清除属性，以避免多个列表项逐步进入。

这可以通过在CSS中添加以下内容来完成：

li {
  clear: both;
  overflow: hidden;
}

从小提琴中删除clear和overflow属性，以查看结果如何变化。

我略微修改了HTML以简化标记。 HTML：

<li>
<a href="http://www.example.com/test/" class="bt-thumb" style="background-image: url(http://placekitten.com/100/100);">
Test Photo
</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>

随附的CSS：

li {
  clear: both;
  overflow: hidden;
  list-style-type: none;
  margin-bottom: 10px;
  margin-top: 10px;
}
.bt-thumb {
  float: left;
  display: block;
  height: 100px;
  width: 100px;
  margin-right: 10px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background-repeat: no-repeat;
}
h6 {
  margin: 0;
}

（我也假设它包含在列表标签​​中，这是一个项目列表。否则，您的包含元素应该切换到<div>）

Answer 3

这是食谱：

1. 制作容器div
2. 把所有内容都放在里面
3. 使内容浮动
4. 给他们固定宽度