ng-repeat 指令被另一个指令下推

Question

所以我很确定这是一个 CSS 问题（我使用的较少），但我想不出更好的标题。问题是我的一个指令被上推并导致其他指令被下推。

这是一个屏幕截图来说明我的意思：

Imgur Link

我在 ng-repeat 中有这两个指令。第二个有一个 ng-if 所以它只在 7 次“重复”后显示。这是我的索引中的 html：

<div ng-repeat="acqui in acquis" class="repeated">
    <card-info class="card" acqui="acqui" ng-style="{'background-image':'url(img/company/' + acqui.seller.img + '.jpg)'}"></card-info>
    <ad-info class="ad-style" ng-if="!(($index + 1) % 7)"></ad-info>
</div>

我的 card-info 指令工作正常，但只要我输入 ad-info 指令，该行上的所有卡片都会下降一点。这是我的广告信息指令的 html：

<div class="ads">
<div class="ad">
    <h4>Ad</h4>
    <h1>Company</h1>
    <img src="img/ad.png">
    <h2>Category</h2>
    <div class="lineup">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rhoncus nunc ligula, eget vehicula neque pellentesque quis. Donec euismod est vel nulla auctor, nec tempus nulla fringilla.
        </p>
        <a href=""><h6 class="left"><u>More Info</u></h6></a>
        <a href=""><h6 class="right"><u>Advertise with Us</u></h6></a>
    </div>
</div>

这是我的 css（我使用较少，所以格式有点不同）：

.ad-style {
    .ads {
        .shadow;
        width: 350px;  
        height: 530px;
        display: inline-table;
        background-color: black;
        margin: 0 10px 0 10px;
        h1 {
            text-align: left;
            font-weight: 900;
            font-size: 50px;
            color: white;
            margin: 0 0 0 20px;
            padding-top: 8px;
            font-family: @Raleway;
        }
        img {
            margin-top: 50px;
            width: 300px;
        }
        h2 {
            font-family: @Open-Sans;
            font-weight: 600;
            color: white;
        }
        p {
            color: white;
            font-size: 15px;
            text-align: center;
            margin: 0 30px 0 30px;
            font-family: @Open-Sans;
            font-weight: 300;
        }
        h4 {
            float: right;
            color: white;
            font-weight: 300;
            margin: 15px 20px 0 0;
        }
        h6 {
            font-family: @Open-Sans;
            font-weight: 300;
            font-size: 10px;
            margin-top: 40px;
        }
        .left {
            float: left;
            margin-left: 20px;
            color: white;
        }
        .right {
            float: right;
            margin-right: 20px;
            color: white;
        }
    }
}

我将解释一些我的实验以及我认为正在发生的事情。

如果我从广告 html 中删除 h4、h1、img 和 h2，它的位置正确，但前提是我删除所有 4 个。如果我删除任何其他组合（任何元素的 1、2 或 3 个） ) 它仍然有同样的问题。这告诉我它与这 4 个元素的样式有关。

我已经尝试过的一些事情：

我尝试将 .ad 样式的位置设为相对，而 .ads 的位置设为绝对。这解决了高度定位问题，但使 ad-info 指令覆盖在下一个 card-info 指令之上。如果有人知道解决该问题的方法，我完全可以将其用作解决方案。

虽然这不起作用，但我确实找到了一个实际的解决方案。我将 h1、h2、img 和 h2 元素移动到 lineup 类的结束 div 下方，然后使用 transform translate 定位 ad-info 指令的所有元素。我真的不想使用这个黑客，因为它只是不好的做法。

除了整个指令被向上推的问题外，所有内容都正确定位在两个指令内。我真的很茫然，不知道下一步该尝试什么。这几乎是我完成这个项目所需要做的最后一件事，我很想启动。

有什么推荐的解决方案吗？如果需要，我可以发布更多我的 CSS。谢谢！

Answer 1

好的，所以我找到了一个仍然有点便宜的修复方法，但我比以前更喜欢它。

我继续添加了相对于广告样式的位置和相对于广告的绝对位置。这当然有同样的问题，即在下一个之上制作指令覆盖，所以我必须想出一个解决方案。

我能想到的最好办法是在我的 ad-info 指令之后添加一个空 div，这样我的 html 就变成了：

<div ng-repeat="acqui in acquis" class="repeated">
    <card-info class="card" acqui="acqui" ng-style="{'background-image':'url(img/company/' + acqui.seller.img + '.jpg)'}"></card-info>
    <ad-info class="ad-style" ng-if="!(($index + 1) % 7)"></ad-info>
    <div class="ad-spacing" ng-if="!(($index + 1) % 7)"></div>
</div>

然后我像这样设置广告间距：

.ad-spacing {
    width: 350px;
    display: inline-table;
    margin: 0 10px -5px 10px;
}

这与我的 card-info 指令的样式相同，因此它只是被推倒了。它并不完美，但它可以完成工作。