各种div的对齐

Question

我正在尝试设计this layout - 整体布局请参考第二张图片。

• A 高 20 像素，必须占据整个屏幕宽度。
• B 高 100 像素，也必须占据整个屏幕宽度。
• C 为 200px 宽，必须占据屏幕的整个高度，不包括由于 A+B 而高于其上方的 120px。
• D 没有限制，适应窗口大小调整。

要详细说明我目前面临的问题，请看第一张图片。

• 如何确保 B3 的中心始终与 div A 中的文本中心对齐？ B1-B4 是我在 B div 中的 4 个不同元素。 B1、B2 和 B4 应保留在同一位置。唯一的“流动”部分是 B3 的左右边距变化，使其保持居中对齐。

我当前的代码可以在this JSFiddle找到。

index.html:

<div id="A">A</div>
<header>
  <!-- Header is B in the diagram -->
  <div id="B1">B1</div>
  <div id="B2">B2</div>
  <div id="B3">B3</div>
  <div id="B4">B4</div>
</header>
<div id="C">C</div>
<div id="D">D</div>

style.css：

html, body {
    width: 100%;
    height: 100%;
}

#A{
    width:         100vw;
    height:        20px;
    background:    black;
    color: white;
    text-align: center;
}

header {
    height: 100px;
    width: 100%;
    background: #494949;
    color: white;
}

#B1 {
    width: 100px;
    height: 100px;
    margin-left: 5px;
    margin-right: 47px;
    float: left;
}

#B2 {
    float: left;
    margin-right: 60px;
}

#B3 {
    float: left;
    height: 75px;
    width: 580px;
    margin-top: 12.5px;
  text-align: center;
}

#B4 {
  float: right;
}

#C {
    height: 100%;
    width: 200px;
    float: left;
    position: fixed;
}

#D {
    background-color: #000000;
    float: left;
    margin-left: 200px;
    width: 100%;
    height: 100%;
    position: fixed;
    color: white;
}

我有一段关于我在 cmets 中的意思的视频。另外，我想指出的是，我实际上并没有按字母命名 div，只是为了这个例子。

感谢您的帮助。

Answer 1

如果想让 B3 与 A 的中心对齐，则不能在 B1 和 B2 上使用 float: left，因为它会将 B3 的中心向右移动。我目前发现的唯一方法是在 B1、B2 和 B4 上使用绝对定位：

header {
    height: 100px;
    background: #494949;
    color: white;
    position: relative;
}

#B1, #B2, #B4 {
  width: 100px;
  height: 100px;
}

#B1 {
  position: absolute;
  top: 0px;
  left: 5px;
}

#B2 {
  position: absolute;
  top: 0px;
  left: 150px;
}

#B3 {
  text-align: center;
}

#B4 {
  position: absolute;
  top: 0px;
  right: 0px;
}

See demo here（使用额外的颜色进行可视化）。

但要小心，如果您在 B3 上的文字太大，它会在 B1、B2 或 B4 下。为避免这种情况，您可以在 B3 的左侧和右侧添加填充。但两边的值必须相同，否则 B3 的中心将不再与 A 的中心对齐。

我一直在寻找没有绝对定位的解决方案（因为我不喜欢它）...