文本旁边的图像移动时，调整大小

Question

我正在一个网站上工作，我试图列出一些关于它的图像文本，但是当字体被调整大小时，文本移动到图像后面。我在相关的话题上寻找答案，尝试了所有的解决方案，但却一无所获。

no-resized

调整>

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

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

Answer 2

没关系!如果你想让孩子"img"one_answers"text"并排，你需要改变父元素的显示:

。Line {display: flex;}

你可以玩儿童展示CSS

.img {
   flex-direction: row;
}
.text {
   flex-direction: row-reverse;
}
...

谢谢!