3

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

4

2 回答 2

6

看到完整的小提琴，我可以发表的评论是

  • 从height:700px;_#wrapper
  • 添加overflow:hidden在#wrapper
  • 添加 （这将启用分词word-wrap: break-word;，因为您的文本太长而无法容纳在一行中..）.content_left

结果可以在http://jsfiddle.net/gaby/L6acE/1/看到

可以在http://caniuse.com/#search=word-wrap看到对该功能的支持

于 2012-11-17T17:12:23.633 回答
5

这是因为字符串（单词）中没有空格试试 

 .content_left{overflow:hidden;}

我不认为任何有效的字符串（单词）只要你的

于 2012-11-17T16:09:22.217 回答