这个 W3Schools 示例中 .container div 的用途是什么？

Question

我试图了解 CSS layout horizontal alignment 并遇到了 this 示例

body {
  margin: 0;
  padding: 0;
}
.container {
  position: relative;
  width: 100%;
}
.right {
  position: absolute;
  right: 0px;
  width: 300px;
  background-color: #b0e0e6;
}

<div class="container">
  <div class="right">
    <p><b>Note: </b>When aligning using the position property, always include the !DOCTYPE declaration! If missing, it can produce strange results in IE browsers.</p>
  </div>
</div>

如果我们删除.container 类或整个div.container，则Chrome、IE 10 和IE 8 上的效果无

这个.container在这个例子中的作用是什么？

Answer 1

这就是它所说的“容器”......有些人说“包装器”......它是为了更容易控制内部元素。我同意，如果你有一个元素，并且类正确，它似乎不需要在那里.. 但是假设你希望整个页面占据 80% 的显示宽度，然后浮动你的孩子element right——容器是完成此任务的最简单方法。所以你的例子本身不需要它..但它是;-)

.container {
position: relative;
border: 1px #00FF00 solid;
width: 80%;
height:500px;
}

.right {
position: absolute;
right: 0px;
background-color: #b0e0e6;
border: 1px #FF0000 solid;
height: 50px;
width: 50px;
}

Fiddle