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

【问题标题】：Text beside image moving when resized调整大小时图像旁边的文本移动
【发布时间】：2017-01-03 05:53:24
【问题描述】：

我正在开发一个网站，我正在尝试列出一些带有图片的文字，但是当 win 调整大小时，文字会移到图片后面。我寻找相关主题的答案，尝试所有解决方案但无事可做。

很抱歉画稿，但我们可以看到一个容器 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>
...

感谢大家的帮助！

【问题讨论】：

有许多不同的方法来“修复”这个问题。发生这种情况的原因是没有足够的窗口空间来允许图像和文本并排放置。当您调整窗口大小时，可能会发生许多不同的事情以留出空间。请指定您希望发生的情况，否则您将收到许多不同的“解决方案”，实际上可能无法提供所需的结果。（即右侧的文本可以包含在图像右侧的 div 中，图像可以调整大小以允许文本空间，两者都可以调整大小，字体可以调整大小等）
如果你想让文本在右上而图像在左上，一种方法是将min-width设置为放置两者的容器。
是的，我明白了，如您所知，我只想要图像旁边的文本（用于列表），如果获胜格式是智能手机，它将是图像和旁边的段落。
如果用在智能手机上，文字应该在图片下方，这样会好很多。至少，我几乎在任何地方都看到过这种情况。
我认为可能是因为这样做更容易

标签： html css wordpress image display

【解决方案1】：

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

.line {display: flex;}

您可以玩儿童显示器 CSS

.img {
   flex-direction: row;
}

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

谢谢大家！

【讨论】：

【解决方案2】：

.img{float:left;}

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

【讨论】：

是的，但是你在其他元素上的 CSS 太多了。请参阅我的 jsfiddle。
@DeepestGray 我认为他提到了#listWithImg .description 向左浮动。
我知道，css 太多了，但是你的 jsfiddle 也有同样的问题，当我调整 win 的大小时，文本会出现在图片下方。