我遇到重叠内容的问题。当我为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>
答案 0 :(得分:5)
因为字符串(word)中没有空格尝试
.content_left{overflow:hidden;}
我不认为任何有效的字符串(单词)只要你的
答案 1 :(得分:4)
看到完整的小提琴,我可以做出的评论是
height:700px;
#wrapper
overflow:hidden
#wrapper
word-wrap: break-word;
上添加.content_left
(这将启用分词功能,因为您的文字太长而无法放在一行.. )结果可以在http://jsfiddle.net/gaby/L6acE/1/
看到