我正在尝试设计 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,只是为了这个例子。
感谢您的帮助。
最佳答案
如果您希望 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 的中心对齐。
我一直在寻找没有绝对定位的解决方案(因为我不喜欢它)...
关于html - 各种div的对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36201954/