ng-repeatディレクティブが別のディレクティブによってプッシュダウンされています

Question

これはCSSの問題（私はそれを使用しています）はかなり確信していますが、より良いタイトルを考えることはできません。問題は、自分のディレクティブの1つがプッシュアップされ、他のディレクティブがプッシュダウンされていることです。ここで

は、私が何を意味するか表示するスクリーンショットです：

Imgur Link

私はNGリピートの内側にこれらの2つのディレクティブを持っています。 2番目にはng-ifがあり、7 "の繰り返し"の後にのみ表示されます。

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

マイカード情報ディレクティブが正常に動作しますが、できるだけ早く私は広告情報ディレクティブで投げるように、そのライン上のカードのすべてのビットをドロップダウン：ここに私のインデックスからの私のhtmlです。ここに広告情報ディレクティブのための私の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つの要素のスタイリングと関係があることを示しています。

私はすでに試したことのいくつか：

を私は.adスタイルの位置の相対と.ads位置は絶対作ってみました。これにより高さの位置付けの問題は修正されましたが、ad-infoディレクティブが次のcard-infoディレクティブの上にオーバーレイされました。もし誰かがそれを解決する方法を知っていれば、私はこれを解決策として使うことで完璧です。

これは機能しませんでしたが、私は実際の解決策を見つけました。私はh1、h2、img、h2の要素をラインアップクラスの終了divの下に移動し、変換変換を使用してad-infoディレクティブのすべての要素を配置しました。私は本当に悪い習慣であるので、このハックを使用しないことを本当に望んでいます。

ディレクティブ全体がプッシュアップされる問題以外は、すべてが両方のディレクティブの内側に正しく配置されます。私は本当に迷っていますし、次に何を試していいのか分かりません。これは、私がこのプロジェクトを終わらせるために必要な最後のものです。私は打ち上げが迫っています。

推奨する解決方法はありますか？私は必要に応じて私のCSSの多くを投稿することができます。ありがとう！

Answer 1

まだ、私は安いハックのビットである修正を見つけましたが、以前のものよりもはるかに好きです。

広告スタイルに関連してポジションを追加して、広告に絶対的な位置を設定しました。これはもちろん、次の命令の上に命令オーバーレイを作成するのと同じ問題を抱えていました。そのために解決策を考え出す必要がありました。

私は私のhtmlになるので、私の広告情報ディレクティブの後に空のdiv権を追加して思い付くことが最高：

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

：私はそのようにように広告スペースをスタイル

<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指示文と同じスタイリングであり、ちょうどプッシュされます。それは完璧ではありませんが、仕事は終わります。