在此 W3School 示例中，.container div 的用途是什么？

Question

我正在尝试了解 CSS layout horizontal alignment and came across 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 class 或整个 div.container，效果是 none on Chrome, IE 10 and IE 8

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

Answer 1

就是这个意思 A "container" ... 有人说 "wrapper" .. 是为了更容易控制里面的元素。我同意，如果你有一个元素，class 正确，它似乎不需要在那里..但是假设你希望整个页面占据显示宽度的 80%，并且然后使您的子元素正确浮动——容器是实现此目的最简单的方法。所以在你的例子中不需要它 per-se ..但它是 ;-)

.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

在此 W3School 示例中，.container div 的用途是什么？

What is the use of .container div in this W3Schools example?

html

css

layout

css-position