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

Question

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

对不起油漆草稿，但是我们可以看到一个容器 div，div 用于 img（管理显示）和另一个 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/

Answer 2

没关系！如果你想 children "img" 和 "text" 并排显示，你需要更改 parent:

的显示

.line {display: flex;}

你可以玩children的显示器 CSS

.img {
   flex-direction: row;
}

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

谢谢大家！

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

Text beside image moving when resized

html

css

wordpress

image

display