image - 为什么我的文本仍然环绕在 float 的 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，而不是使用 float 。 , 根据 width设置，或者你可以输入 display: flex在容器元素上。

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