为什么我的文本仍然包裹在浮动 div 下？

Question

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

简而言之，我有一个包含两个 div 的 div。我希望我的文本在一列中，而图像在另一列中。我不希望文本在图像下换行。我已经访问过其他文本换行问题，但溢出隐藏或添加跨度标签似乎无法解决我的问题。

下面是渲染函数和与之配套的 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>
                );
        });

css

.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;
}

Answer 1

float 应该是这样工作的——文本“浮动”在它周围。

您可以不使用浮点数，而是将两个容器定义为inline-block，并根据widthsettings，或者您可以将display: flex 放在容器元素上。

如果你知道图片的宽度，你可以将它用于图片容器的固定宽度，并使用calc作为文本容器的宽度，如width: calc( 100% - XXpx );，其中XX代表宽度图片。