有关我的网站布局的问题，另一个DIV中的DIV正在居中

Question

所以我正在研究网站布局。 这是我的html代码：

body {
  width: 100%;
  font-size: 30px;
  min-height: 100%;
}

#A {
  padding-left: 30px;
  height: 200px;
  width: 100%;
  border: 1px solid black;
}

#B {
  height: 200px;
  border: 1px solid black;
  text-align: center;
  vertical-align: middle;
}

#C {
  margin-top: 0px;
  margin-left: 0px;
  padding-left: 0px;
  padding-top: 30px;
  width: 20%;
  height: 200px;
  border: 1px solid black;
  position: absolute;
  text-align: left;
}

#D {
  margin-top: 0px;
  width: 100%;
  height: 75px;
  border: 1px solid black;
}

<div id="A">
  Header
</div>
<div id="B">
  Main
  <div id="C">
    Nav
  </div>
</div>
<div id="D">
  De footer
</div>

因此，现在如果我打开该站点，则div C应该在div B之内。 但是就像文本“ Main” div C不在div B的顶部。 它应该和div B内部一样大。 我想知道是否有人对此有快速解决方案？还是我的填充错误... 谢谢！

Answer 1

body{
  width: 100%;
  font-size: 30px;
  min-height: 100%;
}
#A{
  padding-left: 30px;
  height: 200px;
  width: 100%;
  border: 1px solid black;
}
#B{
  height: 200px;
  border: 1px solid black;
  text-align: center;
  vertical-align: middle;
  position: relative;
}
#C{
  margin-top: 0px;
  margin-left: 0px;
  padding-left: 0px;
  padding-top: 30px;
  width: 20%;
  height: 200px;
  border: 1px solid black;
  position: absolute;
  text-align: left;
  top: 0;
  left: 0;
}
#D{
  margin-top: 0px;
  width: 100%;
  height: 75px;
  border: 1px solid black;
}

<div id="A">
			Header
</div>
<div id="B">
  Main
  <div id="C">
    Nav
  </div>
</div>
<div id="D">
  De footer
</div>

我希望对您有用。您需要更改#B 位置：相对，然后可以定位内部的#C 绝对。 顶部：0 和左侧：0 。 如果我正确理解了您的问题，那么看起来应该会对您有所帮助。

Answer 2

如果我说对了，您只想将 Nav div 放在主div 顶部？

为此，您必须使 Main div relative 并添加

top: 0;

到 Nav div 。

body {
  width: 100%;
  font-size: 30px;
  min-height: 100%;
}

#A {
  padding-left: 30px;
  height: 200px;
  width: 100%;
  border: 1px solid black;
}

#B {
  height: 200px;
  border: 1px solid black;
  text-align: center;
  vertical-align: middle;
  position: relative;
}

#C {
  margin-top: 0px;
  margin-left: 0px;
  padding-left: 0px;
  padding-top: 30px;
  width: 20%;
  height: 200px;
  border: 1px solid black;
  position: absolute;
  text-align: left;
  top: 0px;
}

#D {
  margin-top: 0px;
  width: 100%;
  height: 75px;
  border: 1px solid black;
}

<div id="A">
  Header
</div>
<div id="B">
  Main
  <div id="C">
    Nav
  </div>
</div>
<div id="D">
  De footer
</div>

Answer 3

要创建稳定的layout，将#C设为position: absolute;并不是一个好主意，因为它有一些副作用。
并将它的display更改为inline-block很好，然后就可以了。