html - 箭头定位在一条线上并位于所有 div 之上

Question

我对这件事束手无策。

我有几个 div。它们都有一个向下的箭头。它应该居中在中间，棕色线上和所有东西的顶部。最后一个 div 也应该有箭头。我尝试了 z-index、绝对和相对定位，但没有任何效果。

如果单击标题，将打开该框。箭头应停留在准确位置的线上。这对我来说似乎并不那么困难，但不知何故我无法让它发挥作用。

这是一个 fiddle :

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>

提前致谢!

Answer 1

从箭头中移除绝对定位，而是将其设置为显示为 block 并为其提供 margin: 0 auto 以使其居中:

.arrow-down {
    ...    
    background-position: bottom;
    display: block;
    margin: 0 auto -36px auto;    
}

请注意，我还将其 background-position 设置为 bottom 以使背景图像直接位于元素的底部。

JSFiddle demo .

编辑:来自评论:

Yes, it should be just underneath the brown line, so it sort of looks like this: -----v------- The two point of the V should touch the line

这是一个有点大的变化。我们需要从各个 block 中移除背景(以阻止它们与箭头重叠)，然后从 block 容器中移除 float (以固定高度)，最后为容器提供白色背景并增加箭头上的负边距:

.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 .