内容重叠div

时间:2012-11-17 16:03:16

标签: css html overlapping

我遇到重叠内容的问题。当我为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>

示例jsfiddle Example

2 个答案:

答案 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/

看到

可以在http://caniuse.com/#search=word-wrap

查看对此功能的支持