DIV 金字塔
我正在尝试构建一个由 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;
}
I'm trying to build a pyramid that's made of 4 DIVs. The layout looks like this:
------
| #1 |
------
----------------
| #2 | #3 | #4 |
----------------
Moreover I need 3 additional DIVs starting at the center DIV (#3) and containing either #1, #2 or #3 additionally. These DIVs are used the build a sliding effect with jQueryUI later on.
It's supposed to look like #1, #2 and #4 slide out of #3.
The margin between the DIVs is supposed to be 2 pixels. I also want the whole block to be centered.
Even with display: inline; and position: absolute; enabled on the visible and invisible DIVs I can't get the layout right. I used some negative margins and when it looked ok for the first time I saw that my top DIV was positioned outside of the html body.
I suppose there is a more simple and elegant way to achieve what I want.
Every kind of advice regarding either this specific problem or something you see that could improve my CSS is more than welcome.
Thanks in advance
Sebastian
Here's what I've got so far:
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;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我可能错过了您想要的一些属性,但请尝试以下操作:
HTML:
CSS:
I may have missed some of the attributes you wanted but try this:
HTML:
CSS: