主div不垂直擴展

我有一個問題，我無法解決。我希望我的主分區在其子div充滿內容時垂直擴展，但無法實現。當我將lorem文本添加到左側div時，如果文本包含的原始寬度超過其原始寬度，則該文本會展開，但主div不會展開。我該如何解決這個問題？主div不垂直擴展

HTML

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
    <link rel="stylesheet" href="index.css"> 
    </head> 
<body> 
    <div id="main"> 
    <div id="left"></div> 
    <div id="middle"></div> 
    <div id="right"></div> 
    </div> 
</body> 
</html>

CSS

#main{ 
    background-color:#ff8f79; 
    width:900px; 
    min-height:400px; 
    margin:0 auto; 
    position:relative; 
} 

#left{ 
    position:relative; 
    width:300px; 
    min-height:300px; 
    float:left; 
    background-color:blue; 
} 
#middle{ 
    width:300px; 
    height:300px; 
    float:left; 
    background-color:green; 
} 
#right{ 
    width:300px; 
    height:300px; 
    float:left; 
    background-color:black; 
}

來源

2014-10-27 salep

這裏是一個小提琴：http：// jsfiddl e.net/3eu1k2fa/ – 2014-10-27 13:59:24

您需要清除浮動。兩種方法1. Clearfix：'#main：after {content：'';顯示：塊;清除：both}'或2.'#main {overflow：hidden; }' – misterManSam 2014-10-27 14:02:57

謝謝！我注意到瞭解決方案並將在未來使用。 – salep 2014-10-27 14:06:28

-1

它添加到CSS

#left, #middle, #right { 
    word-wrap: break-word; 
}

保持每個單獨的盒子中的所有文本和他們展開並擴大主要

來源

2014-10-27 14:13:20 user4185589

主div不垂直擴展

回答

相關問題