html - 关于我的网站布局的问题，另一个 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 position: relative 然后您可以定位内部#C absolute。 上:0 和左:0。如果我正确理解了你的问题，这个看起来应该对你有帮助。