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

if (published.get.isSuspended)

这就是全部。在这里演示：https://jsfiddle.net/y48gnhcm/

Answer 2

没关系！如果你想要孩子“img”和“text”并排，你需要改变父母的显示：

.line {display：flex;}

您可以玩儿童的显示器 CSS

.img {
   flex-direction: row;
}

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

全部谢谢！

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

2 个答案: