浮动的女主角紧挨着对方

i am trying to create the following positions inside a list tag on my website

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

this is my code:

这是我的代码:

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

but i just get each element stack on top of each other any help will be appreciated.

但我只是把每个元素堆叠在一起，任何帮助都会被欣赏。

Thanks

谢谢

3 个解决方案

#1

Here's a working fiddle: https://jsfiddle.net/xc4ky1gj/2/

这里有一个工作的小提琴:https://jsfiddle.net/xc4ky1gj/2/。

Couple of things to point out:

有几点需要指出:

First depending on the size of your image and the amount of text you have, there is a very good chance, your floated images will be larger than the content inside. You'll need to add a clearing property to your container to avoid multiple list items stair-stepping.

首先，根据图像的大小和文本的数量，很有可能，浮动图像会比内部内容更大。您将需要在容器中添加一个清理属性，以避免多个列表项累加。

This can be done by adding the following to your CSS:

这可以通过在CSS中添加以下内容来实现:

li {
  clear: both;
  overflow: hidden;
}

Remove the clear and overflow attributes from the fiddle to see how the results change without.

删除清除和溢出属性的小提琴，看看如何改变的结果没有。

I slightly modified your HTML to simplify the mark-up a tad. HTML:

我稍微修改了您的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>

And the accompanying CSS:

以及随之而来的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;
}

(I'm also making the assumption this is contained within a list tag and this is a list of items. Otherwise, your containing element should be switched to a <div>)

(我还假设它包含在一个列表标记中，这是一个项目列表。否则，您的包含元素应该切换到

)

#2

First of all the html markup, the way how you have wrapped elements inside one-another is terrible ... putting that aside ... this is the minimum working version of what you are asking.

首先，html标记，如何将元素封装在另一个中是很糟糕的…把放在一边…这是你所要求的最低工作版本。

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

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

#3

-2

Here's the recipe:

这里的食谱:

Make a container div
做一个容器div
put everything inside
把所有的内
make the contents float
使内容浮动
give them fixed width
给他们固定宽度

#1