我意识到这可能是另一个新手问题,但我尝试了不同的方法,但无法解决这个问题。我基本上是在构建一个团队页面,我想在每个团队成员的左侧有一张图片,右侧有一些文本。在这个人的名字下面是标题,在标题下面(在标题和段落之间)是一堆用于电子邮件、LinkedIn 和 Twitter 的徽章链接。为了让徽章在标题下方完美对齐,我使用了一个表格。我想为每个团队成员重复该设置,并让他们堆叠在一起。 我现在为一个人(正确显示)在 html 中所拥有的:
<div class="left">
<img src="url"/>
</div>
<div class="right">
<H3>Name</H3>
<H4>Title</H4>
<table>
<tr>
<td><a href="mailto:email"><img src="url"/></td>
<td><a href="http://linkedin.com/url"><img src="url"/></a></td>
<td><a href="url"><img src="url"/></a></td>
</tr>
</table>
<p>Experience</p>
<p>Experience</p>
<p>Experience</p>
</div>
这是 CSS:
.left img{
position:relative;
float:left;
height:15%;
width:15%;
top:50px;
}
.right{
position: relative;
float:left;
margin-top:10px;
}
.right h3{
color:#39c388;
font-weight:bold;
font-family:Arial,sans-serif;
font-size:28px;
position:relative;
top:30px;
left:20px;
}
.right h4{
color:#818286;
font-family:Arial,sans-serif;
font-size:24px;
position:relative;
top:20px;
left:20px;
}
.right td img{
width:20px;
height:20px;
position:relative;
top:20px;
left:20px;
}
.right td{
width:30px;
}
.right p{
color:#818286;
font-family:Arial,sans-serif;
font-size:20px;
position:relative;
top:40px;
left:20px;
}
到目前为止一切顺利。现在,我想复制此代码并将这些部分堆叠在一起。你会怎么做?我试过围绕整个 html 代码创建一个 div,然后给那个 div 一个类,并使用位置、z-index 等,但没有任何成功。
最佳答案
如果你的意思是“堆叠在彼此之上”,就像彼此分层一样,那么你需要使用:
{position: absolute; top: 0; left: 0}
(将顶部和左侧位置调整到您需要的位置)
在容器上 <div>
s 用于每个部分。
但是,如果您的意思是页面下方列出的“堆叠在一起”,那么它应该与容器一起使用 <div>
原样。您可能需要给容器 <div>
和 left div
一个{overflow: hidden}
(对于 IE 6 - 8 为 {height: 1%}
)计算其中的 float 子元素。
关于html - 团队页面的两个 div 相互重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23726123/