html - 图像旁边的文字在调整大小时移动

Question

我在一个网站上工作，我试图列出一些带有图像的文本，但是当调整胜利的大小时，文本移到了图像后面。我寻找相关主题的答案，尝试所有解决方案但无所事事。

no-resized

resized

对不起油漆草稿，但是我们可以看到一个容器 div，一个用于 img 的 div(用于管理显示)和另一个用于文本的 div

CSS:

#listWithImg .img {
    display: inline-block;
    float: left;
    width: 45px;
    height: 45px;
    margin: 10px;
}
#listWithImg ul {
    width:100%;
    padding-bottom: 0px !important;
    padding-top: 0px !important;
    margin-top:0px !important;
    margin-bottom: 0px !important;
}
#listWithImg .description {
    float:right;
    display: inline-block;
}
#listWithImg .line {
    display: inline-block;
}

<ul>
    <li>
        <div class="line">
            <div class="img">
                <img class="alignnone size-full wp-image-380" src="linkImg" alt="img.png" width="32" height="32" />
            </div>
            <div class="description">
                <h6>Text-Small-Title</h6>
            </div>
        </div>
    </li>
...

感谢大家的帮助!

Answer 1

.img{float:left;}

就是这样。此处演示:https://jsfiddle.net/y48gnhcm/