[我在这里共用一支笔here我在div.container中插入了6个div.squares我已经设置了.squares css属性float:left我的疑问是-当我在div.container上给红色边框时,该边框不覆盖6 div(如笔所示,边框仅显示在正方形的顶部)根据我的说法,该边界应覆盖所有正方形
Click on this link to see the pen
.square{
padding-bottom:30%;
width:30%;
margin:10px;
background-color:brown;
float:left;
}
.container{
height:100%;
max-width:600px;
margin:20px auto;
border:2px solid red;
height:auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</body>
</html>
尝试摆脱height: auto
。两次呼叫高度可能会引起问题。