我正在尝试建立一个由 4 个 DIV 组成的金字塔。布局如下所示:
------
| #1 |
------
----------------
| #2 | #3 | #4 |
----------------
此外,我需要 3 个额外的 DIV,从中心 DIV (#3) 开始,并额外包含 #1、#2 或 #3。这些 DIV 用于稍后通过 jQueryUI 构建滑动效果。它应该看起来像 #1、#2 和 #4 从 #3 中滑出。
DIV 之间的边距应该是 2 个像素。我也希望整个街区居中。
即使有显示:内联;和位置:绝对;在可见和不可见的 DIV 上启用我无法正确布局。我使用了一些负边距,当它第一次看起来不错时,我看到我的顶部 DIV 位于 html 正文之外。
我想有一种更简单优雅的方式来实现我想要的。
关于这个特定问题或您看到的可以改进我的 CSS 的任何建议都非常受欢迎。提前致谢
塞巴斯蒂安
这是我到目前为止所得到的:
HTML:
<div id="centerbox">
<div id="main">main</div>
<div id="rail_top">
<div id="top">top</div>
</div>
<div id="rail_left">
<div id="left">left</div>
</div>
<div id="rail_right">
<div id="right">right</div>
</div>
</div>
CSS:
#centerbox {
height: 602px;
width: 904px;
margin-top: 640px;
margin-left: auto;
margin-right: auto;
}
/* blue */
#main {
background-color: #33F;
height: 300px;
width: 300px;
margin: 2px;
z-index: 9999;
position: absolute;
display: inline;
margin-left: 302px;
}
/* green */
#top {
background-color: #3F0;
height: 300px;
width: 300px;
z-index: 1;
position: absolute;
display: inline;
}
/* pink */
#left {
background-color: #F06;
height: 300px;
width: 300px;
z-index: 1;
}
/* orange */
#right {
background-color: #FC0;
height: 300px;
width: 300px;
z-index: 1;
margin-left: 302px;
}
#rail_top {
height: 602px;
width: 300px;
display: inline;
position: absolute;
margin-top: -300px;
margin-left: 302px;
}
#rail_left {
height: 300px;
width: 602px;
float: left;
position: absolute;
display: inline;
margin-top: 2px;
}
#rail_right {
height: 300px;
width: 602px;
float: right;
position: absolute;
display: inline;
margin-left: 302px;
margin-top: 2px;
}