Image 为什么我的文本仍在浮动div下换行？

我有一个渲染组件，它渲染出一些文本和图像。该组件是一个包含两个DIV的DIV。第一个div包含一个图像，该div向右浮动。下一个div包含各种文本字符串。我在父div上有overflow:hidden，但我的文本仍环绕着包含图像的div。目前唯一可以解决这个问题的方法是将包含图像的div的高度设置为100%。但是，如果我这样做，我就不能向这个div添加边框/背景，因为它扩展了整个页面

简而言之，我有一个包含两个div的div。我希望我的文本在一列中，图像在另一列中。我不希望文本在图像下换行。我已经访问了其他文本包装问题，但是溢出隐藏或添加span标记似乎并不能解决我的问题

下面是渲染函数及其附带的SASS/CSS

render() {
        const renderHelpFile = this.props.data.filter(obj => {
            return this.props.name === obj.name;
                }).map((obj, idx) => {
                return (
                    <div key={idx} className="fadingDiv">
                        <div className="divImg">
                            <img src={`${obj.image}`} className="helpFileImg"></img><br />
                        </div>
                        <div className="displayLineBreak">  
                            <h3 style={upperStyle}> {obj.name} </h3>
                            <b>Path:</b> {obj.path} <br /><br />
                            {obj.content} <br /><br />
                            <b>Troubleshooting:</b> {obj.troubleshoot} <br /><br />
                            <b>Video:</b> {obj.video} <br />
                        </div>
                    </div>
                );
        });

---

这就是

float

的工作原理-文本在其周围“浮动”

您可以使用相应的

width

设置将两个容器定义为

inline block

，也可以在容器元素上放置

display:flex

，而不是使用float

---

如果您知道图像的宽度，可以将其用于图像容器上的固定宽度，并将

calc

用于文本容器的宽度，如

width:calc（100%-XXpx）

，其中XX代表图像的宽度。

如果您可以发布呈现HTML的某些相关部分，则解决此问题会容易得多。因此，将div定义为内联块，并将图像div定位到文本div的右侧？flex会产生奇怪的结果-基本上将两个div扩展到相同的大小。这就像将图像div高度设置为100%。所以，图像div的背景一直延伸到文本所在的楼层。使用内嵌块方法，有时图像div位于屏幕底部或顶部，会得到奇怪的结果。文本有时从屏幕的顶部或中间开始。您需要一些额外的设置：对于图像容器上的内联块

垂直对齐：顶部

，对于flexbox

flex grow:0

，以及

对齐内容：flex start在将内联块添加到子div后，只需添加垂直对齐：top来修复对齐。非常感谢。
.fadingDiv {
    text-align: justify;
    overflow:hidden;

    -webkit-animation: divFadeIn .75s ease-in forwards;
    animation: divFadeIn .75s ease-in forwards;
}

.displayLineBreak {
    white-space: pre-line;
}

.divImg {
    width: 35%;
    float: right;
    padding: 5px;
    background: #0080ff;
    border: 2px solid black;
    border-radius: 2px;
    //height: 100%;
}

.helpFileImg {
    width: 100%;
    height: auto;
}