Question

我正在建立一个论坛，因此我正在构建一个新帖子的预览。这也是我论坛上每个帖子的布局。当我在段落中添加一些文字时，我添加的内容越长，但这不是我之前问过的问题。

我的问题是你可以在下面的代码（整页视图）中看到，通过在段落中添加文本，容器不会增长。我只是输入一些虚拟文本，以便您可以看到我的问题是什么。

＆＃13;

#prevContainer {
    width:95%;
    background-color:white;
    opacity:1;
    border-radius: 10px;
    margin:0 auto;
    min-height:150px;
    height:auto;
    margin-top: 10px;
    margin-bottom:10px;
    border:2px solid grey;
}
#prevContainer #left {
    border-right:2px solid grey;
    width: 120px;
    min-height:150px;
    height:auto;
    float:left;
}
#prevContainer #left #prevAvatar {
    border:1px solid black;
    border-radius:10px;
    margin:0 auto;
    width:100px;
    margin-left:10px;
    margin-top:0px;
}
#prevContainer #right {
    float:left;
    margin-left:0px;
    margin-top:0px;
    min-height: 150px;
    height:auto;
    min-width:200px;
    width:500px;
    max-width: 517px;
}
#prevContainer #right #text {
    margin-left:10px;
}
#prevContainer #right #text #prevOutput {
    background-color:yellow;
    white-space: pre-wrap;
    word-break: break-all;
    font-size:16px;
}

＆＃13;

<div id="prevContainer">
                                <div id="left">
                                    <img id="prevAvatar" src="" alt="Avatar"/>
                                </div>
                                <div id="right">
                                    <div id="text">
                                        <p id="prevOutput">
                                        I HOPE THIS WORKS I HOPE THIS WORKS
                                        I HOPE THIS WORKS I HOPE THIS WORKS
                                        I HOPE THIS WORKS I HOPE THIS WORKS 
                                        I HOPE THIS WORKS I HOPE THIS WORKS
                                        I HOPE THIS WORKS I HOPE THIS WORKS
                                        I HOPE THIS WORKS I HOPE THIS WORKS
                                        I HOPE THIS WORKS I HOPE THIS WORKS
                                        I HOPE THIS WORKS I HOPE THIS WORKS
                                        I HOPE THIS WORKS I HOPE THIS WORKS
                                        I HOPE THIS WORKS I HOPE THIS WORKS
                                        I HOPE THIS WORKS I HOPE THIS WORKS
                                        
                                        
                                        
                                        </p>
                                    </div>
                                    <!--<button id="button">New Post</button>-->
                                </div>
                            </div>

＆＃13;

提前致谢

Answer 1

你没有清除浮子。您可以将overflow: hidden;添加到#prevContainer或使用：

#prevContainer:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

Answer 2

将顶部和底部填充添加到文本所在的容器中。

元素不会展开以包含子内容

2 个答案: