我尽全力以赴。
我有几个div。它们都有向下的箭头。它应居中居中,在棕色线上并在所有内容的顶部。最后一个div也应带有箭头。我尝试了z-index,绝对和相对定位,但没有任何效果。
如果单击标题,则将打开该框。箭头应留在直线上的确切位置。对我来说,这确实似乎并不那么困难,但是以某种方式我无法使其工作。
这是一个小提琴:
http://jsfiddle.net/8eLwr
<article id="made" data-magellan-destination="made">
<div class="blocks-holder wide made">
<div class="block wide" id="">
<div class="openblock">
<div class="maak-competences">
<h2>title</h2>
<h4>tagline</h4>
<div class="arrow-down"></div>
</div>
非常感谢!
最佳答案
删除箭头的绝对位置,而是将其设置为显示为block
并赋予它margin: 0 auto
使其居中:
.arrow-down {
...
background-position: bottom;
display: block;
margin: 0 auto -36px auto;
}
请注意,我还将其
background-position
设置为bottom
,以使背景图像直接位于元素的底部。JSFiddle demo。
编辑:从评论:
是的,它应该在棕色线的下面,所以它看起来像这样:----- v ------- V的两个点应该碰到该线
这是一个很大的变化。我们需要从各个块中删除背景(以使其停止与箭头重叠),然后从块容器中删除浮标(以固定高度),最后为容器提供白色背景并增加箭头上的负边距:
.blocks-holder .block {
...
float: left; /* Remove this. */
}
.blocks-holder .block.wide {
...
background: transparent;
}
.blocks-holder.wide {
...
background: #fff;
}
.arrow-down {
...
margin: 0 auto -46px auto;
}
JSFiddle demo。