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设置将width定义为display: flex，也可以将calc放在容器元素上，而不是使用浮点数。

如果你知道图像的宽度，可以在图像容器上使用它作为固定宽度，并使用width: calc( 100% - XXpx );作为文本容器的宽度，如db.addUser(<user document>)，其中XX代表图像的宽度。

为什么我的文字仍然包含在浮动的div下？

1 个答案: