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

Question

我有一个渲染组件，可以渲染一些文本和图像。该组件是一个包含两个 div 的 DIV。第一个 div 包含图像，这个 div 向右浮动。接下来的 div 包含各种文本字符串。我有 overflow: hidden on the parent 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 的工作方式 - 文本 "floats" 围绕它。

您可以根据 width 设置将两个容器都定义为 inline-block，而不是使用浮动，或者您可以将 display: flex 放在容器元素上。

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

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

Why is my text still wrapping under a floated div?

css

image

word-wrap

reactjs