1

嗨，我正在尝试制作简单的网站（我正在学习这个）。我创建了简单的网站（静态网站）。我想尝试使用 CSS 进行动态处理。所以尝试了这个。我希望它们重叠，这样我就可以创建像这样的漂亮文件

    _ ______  _ _______
   |N|De|N|De|N|Details|.....Etc
   |A|  |A|  |A|       |     
   |M|  |M|  |M|       |     
   |E|  |E|  |E|       |     
   |_|__|_|__|_|_______|

但它看起来像这样

  _ _______  _ _______
   |N|Details||N|Details|.....Etc
   |A|       ||A|       |
   |M|       ||M|       |
   |E|       ||E|       |
   |_|_______||_|_______|

如何做到这一点 js fiddle 链接：http: //jsfiddle.net/kdGCu/

4

3 回答 3

2

好吧，您的 CSS 中的事情非常混乱，所以让我们以正确的方式来做吧，我已经从头开始做了一个示例

使用position: relative;容器并包装所有 3 个 div 并分配position: absolute;.

现在在这里使用top和left属性来堆叠它们......

演示（堆叠演示）

演示（根据您的需要修改）

演示（播放以z-index在悬停时显示内容）

在 CSS am usingnth-of-type中，这意味着它将选择元素的第 n 种类型，在这种情况下它是 a divhere

CSS

<div class="wrap">
    <div></div>
    <div></div>
    <div></div>
</div>

.wrap {
    position: relative;
}

.wrap div {
    height: 300px;
    width: 300px;
    position: absolute;
}

.wrap div:nth-of-type(1) {
    background: #f00;
    top: 0;
    left: 0;
}

.wrap div:nth-of-type(2) {
    background: #00f;
    top: 0;
    left: 40px;
}

.wrap div:nth-of-type(3) {
    background: #0f0;
    top: 0;
    left: 80px;
}
于 2013-05-14T06:44:52.747 回答
1

好吧，我想我现在明白了问题，我想我找到了解决方案，你几乎完成了但缺少一些东西，只是我添加并修复了你的width课程，你可以在你的代码更新中找到解决方案：http: //jsfiddle.net/ kdGCu/2/div.mainContainer>div.Child

div.mainContainer>div {
    display:inline-block;
    float:left;
    position:relative;
    overflow:auto;
    width: 5em;
}

.Child {
    z-index:5;
}

我希望我能帮助你。

于 2013-05-14T06:58:26.577 回答
0

这个想法是使用负边距。

.Profiles {
    width:20em;
    height:300px;
    border: 2px solid black;
    border-radius:10px;
    left:1em;
    z-index:0;
    position:relative;
    margin-left:-20px;
}

看到这个jsfiddle。http://jsfiddle.net/harendra/kdGCu/3/

于 2013-05-14T06:53:34.873 回答