我遇到内容重叠的问题。当我尝试这段 HTML 代码时，content_left 中的文本与我希望它包含的整个区域重叠。当我将高度更改为自动时，它并不能解决问题。内容向右重叠，底部被切断。
#wrapper {
height: 1500px;
margin: 20px auto auto auto;
padding: 0;
background: url(wrapper.png);
}
.content_left {
float: left;
width: 600px;
padding: 20px 0 0 30px;
margin-left: -300px;
position: relative;
height: auto;
}
<div id="wrapper">
<div id="header">
<div id="logo">
</div>
<div id="header_right">
</div>
</div>
<div class="content_left">
hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh
hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh
hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh
</div>
<div class="content_right">
</div>
<div class="footer">
Footer goes here
</div>
</div>
Example jsfiddle 示例 http://jsfiddle.net/L6acE/
看到完整的小提琴，我可以发表的评论是
- 去除
height:700px;来自#wrapper
- add
overflow:hidden on the #wrapper
- add
word-wrap: break-word; on the .content_left
(这将启用断词，因为您的文本太长，无法容纳在一行中。)
结果可见于http://jsfiddle.net/gaby/L6acE/1/ http://jsfiddle.net/gaby/L6acE/1/
对此功能的支持可以在以下位置查看http://caniuse.com/#search=word-wrap http://caniuse.com/#search=word-wrap
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
