html - 各种div的对齐

Question

我正在尝试设计 this layout - 整体布局引用图2。

• A 的高度为 20 像素，必须占据整个屏幕的宽度。
• B 高 100 像素，也必须占据整个屏幕宽度。
• C 的宽度为 200 像素，并且必须占据屏幕的整个高度，由于 A+B 而不包括其上方的 120 像素。
• 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>

样式.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;
}

我有一段视频，说明我在评论中的意思。另外，我想指出我实际上并没有按字母命名 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 的中心对齐。

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