內容重疊div

Question

我遇到重疊內容的問題。當我嘗試使用HTML代碼時，content_left中的文本與我希望包含的整個區域重疊。當我將高度更改爲自動時，它不能解決問題。內容重疊到右側，底部被切斷。

<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> 

CSS

#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; 
} 

例jsfiddle Example

Answer 1

它，因爲在字符串（字）沒有空間嘗試

.content_left{overflow:hidden;} 

，我不認爲任何有效的字符串（字）只要你的

Answer 2

看到完整的小提琴，我可以做評論是

• 從#wrapper
• 刪除height:700px;上#wrapper
• 添加overflow:hidden在.content_left
  （這將使單詞添加word-wrap: break-word; - 因爲您的文字太長而無法放入單行中。）

結果可以看到蜜蜂在http://jsfiddle.net/gaby/L6acE/1/

---

支持此功能可以在http://caniuse.com/#search=word-wrap可以看出