列表中图像旁边的最小css / html文本段落

Question

我正在尝试创建一个列表（ul），每个li左侧包含img，左侧对齐文本（标题和一个或多个段落）图片，在右边。

我使用了float: left和一些display，但无法使其工作，文字漂浮在图像周围（下方），而我想保持左对齐但旁边的图像。

如果可能的话，我希望将html和css保持在最低要求（并与大多数浏览器兼容）。

Answer 1

将float:right用于文本（或包含文本所有段落的元素），然后使用clear:both下面的文件或使用flexbox（最好）。

Answer 2

使用＆＃34;之前＆＃34;伪选择器可能是获取图像的好方法。

类似于：https://jsbin.com/sumomebolu/edit?html,css,output

ul {
    list-style-type: none;
}
li:before{
  content:url('url.jsg');
  position:relative;
  left:-20px;
}

Answer 3

<ul>
    <li>
        <img />
        <div>
             <span></span>
             <p></p>
        </div>
    </li>
</ul>



img, div {
    display: inline-block;
    vertical-align:top;}