Question

我有一个我无法解决的问题。我希望我的主div在其子div充满内容时垂直扩展，但无法实现。当我将lorem文本添加到左侧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;
}

Answer 1

将此添加到css

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

将所有文本保留在每个单独的框中，然后展开并展开主

主要部门不会垂直扩展

1 个答案: