Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果我们移除.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

在这个W3Schools示例中，.container div有什么用？

1 个答案: