Question

所以我很确定这是一个css问题（我使用的更少），但我无法想到一个更好的标题。问题是我的一个指令被推高并导致其他指令被推下来。

这是一个屏幕截图，显示我的意思：

我在ng-repeat中有这两个指令。第二个有一个ng-if，它只显示在7＆＃34;重复＆＃34;之后。这是我索引中的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指令，该行上的所有卡都会下降一点。这是我的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;
        }
    }
}

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

如果我从ad html中删除h4，h1，img和h2，它会正确定位，但仅当我删除所有4.如果我删除其他任何组合（任何元素的1,2或3））它仍然有同样的问题。这告诉我它与这4个元素的样式有关。

我已尝试过的一些事情：

我尝试使.ad风格的位置相对而.ads位置绝对。这修复了高度定位问题，但是将ad-info指令覆盖在下一个card-info指令之上。如果有人知道解决这个问题的方法，那么使用它作为解决方案我完全没问题。

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

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

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

Answer 1

好吧，所以我找到了一个仍然有点廉价黑客的修复，但我比以前更喜欢它。

我继续为广告添加了相对于广告风格和绝对位置的位置。这当然有同样的问题，使指令覆盖在下一个，所以我不得不想出一个解决方案。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="blur">
        <div class="img-thumb">
            <img src="http://store1.up-00.com/2016-09/1472892032323.png" alt="Alternate Text" />
            <div style="background-attachment:scroll;"></div>
        </div>
    </section>

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

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

这与我的card-info指令具有相同的样式，因此它只会被推翻。它并不完美，但它完成了工作。

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

1 个答案: