我尽全力以赴。

我有几个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

10-05 21:04
查看更多