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;

Answer 2

段落元素 -

引入了一个小边距。清除它 - clearfix，即

p {
padding:0; 
margin:0;
}

Havnt 对其进行了测试，但这应该可以修复您的布局。