主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不垂直扩展

回答

相关问题