html - 布局问题(内容3张图片)

Question

当我尝试在内容(中间)部分使用 p 元素时，我得到了以下结果。我对占用空间和破坏布局不感兴趣。

HTML

<div id="main">
    <div id="content_top">
        <h1>Welcome</h1>
    </div>
    <div id="content_mid">
        <h2>Welcome</h2>
        <p>Text</p>
    </div>
    <div id="content_bot"></div>
</div>

CSS

#content_top {
    width: 560px;
    height: 92px;
    background: url(../images/content_top.png);
    padding: 70px 70px 0px 70px;
}

#content_mid {
    width: 560px;
    padding: 0px 70px 0px 70px;
    background: url(../images/content_mid.png);
}

#content_bot {
    width: 700px;
    height: 344px;
    background: url(../images/content_bot.png);
}
#main {
    width: 700px;
    margin-right: 10px;
    float: left;
}

如何确保#content_mid(我将放置所有内容的位置)中的元素不会破坏布局？

Answer 1

解决方案是overflow:hidden;