Question

如何在包装元素周围扩展容器，这样当我放入内容时它会自动扩展？即使标题包装在容器div中，容器也会卡在页眉上方的页面顶部。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>basic</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <div id="container">
       <div id="header">
           <div class="nav_left">
               <a href="#">Home</a>
               <a href="#">About</a>
               <a href="#">Download</a>
               <a href="#">Contact</a>

           </div>
       </div>
               <div id="bigbox">

               </div>


   </div>

</body>
</html>

CSS

html{
}
body{
    margin: 0;
    padding: 0;
    background-color: grey;

}
#container{
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}
#header{
    width:80%;
}
.nav_left{
    float:left;
    height:30px;
}
#bigbox{
    width:80%;
}

Answer 1

您需要清除#header元素中的浮点数。我有我的信任.clear-floats类：

.clear-floats {
  display: block;
}

.clear-floats:after
{
  content: ".";
  display: block;
  width: 100%;
  height: 0px;
  visibility: hidden;
  clear: both;
}

将其添加到您的样式表，然后将class="clear-floats"添加到您的标题元素。

如何在包装元素周围扩展容器

1 个答案: