Question

在这种情况下，包装器的高度计算为零。但是，我不知道如何包装而不包装所有物品。

HTML代码为：

<!doctype html>
<html>
<head>
  <style>
    .wrapper {
    width: 660px;
    margin-left: auto;
    margin-right: auto;
    }

    .item {
   float: left;
   width: 200px;
   background-color: orange;
   height: 200px;
   margin-right: 10px;
   margin-left: 10px;
   }
</style>
</head>
<body>
  <div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>
</html>

谢谢，大家

我很好奇，我认为以这种方式对齐是将其放在框架中。顺便说一句，我以为我把它放在没有宽度但没有高度的框架中，所以我问了一个问题。这是因为即使有更多的项目，即即使有六个项目，它们也以每行三个项目的方式排列。

Answer 1

父div不包含其子项，因为它们是浮动的。最简单的解决方法可能是将overflow:hidden和display:block添加到.wrapper，请尝试使用以下包装类的代码。

.wrapper {
  width: 660px;
  display: block;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}

Answer 2

您可能正在浮动子div。如果是这样，请尝试以下样式：

.wrapper { 
    content: " "; 
    display: block;
    clear: both;
}

Answer 3

当对子元素使用float时，父元素应为float。因此，请使用下面提供的另一个属性。

.wrapper{
width: 660px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
}
.item {
width: 200px;
background-color: orange;
height: 200px;
margin-right: 10px;
margin-left: 10px;
}

谁能解释为什么项目对齐中心？

3 个答案: