将对象相对于另一个对象Angularjs对齐

Question

我使用ng-show和ng-hide开发了一个在我点击后弹出文本的说明框。 但问题是，解密框并未完全显示在文本下方，如图中所示。

我希望描述完全在R2A下显示。

这是我的代码：

HTML

<ion-content>


        <div class="contenu">
          <p>Salut</font><font size="4">, Welcome</font><font size="4">, Bienvenue chez </font><a href="#" ng-model="collapsed" ng-click="collapsed=!collapsed" style="font-size:180%; color:#B9121B">R2A</a><font size="4">...</font></p>
          <div ><font class="boxed" ng-show="collapsed"size="4" >I am description</font></div>

          <p> Nous sommes ton equipe de Welcomers, nous allons t'accompagner pour ta première journée.</p>
        </div>

</ion-content>

CSS

.collapsed {
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}

.contenu .boxed {
display: inline-block;
  padding:20px; 
  border-radius: 10px;
  box-shadow: 5px 5px 10px #000;
  background-color: #FBC02D; 
}

Answer 1

首先，将button转换为boxed，然后将boxed元素放入链接中。 现在，您可以将button元素相对于包含R2A文本的boxed元素定位。

position: absolute;元素应该具有static，因此它相对于没有位置button的第一个祖先定位。接下来，默认情况下位置为static的{​​{1}}应为position: relative;。这意味着它相对于其默认位置定位。如果我们没有指定top，left等，则位置保持不变。 More here

所以，html：

 ...
<button class="important-link" ng-model="collapsed" ng-click="collapsed=!collapsed">
    <span>R2A</span>
    <div class="boxed" ng-show="collapsed">
      I am Description
    </div>
  </button> 
 ...

和css：

important-link {
  position: relative;
  background: none;
  border: none;
}

.important-link span {
  font-size: 30px;
  color: #B9121B;
}

.boxed {
  min-width: 100px;
  position: absolute;
  width: auto;
  top: 50px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 5px 5px 10px #000;
  background-color: #FBC02D;
}

和here is a fiddle完整的例子。

PS。建议您不要在HTML中使用内嵌CSS，例如style="font-size:180%; ..

修改

所以，如果你不想要某种工具提示＆＃39;效果有两种解决方案。 在第一个中，您将margin-top添加到下一个div，以便说明框不会与下面的文本重叠。您可以在ng-class上使用ng-style添加它，以便仅在显示说明框时才应用保证金。

第二个解决方案，在button元素内，文本（R2A）和描述都应该是块元素，以便它们将一个置于另一个（block vs inline elements）之下。 然后从盒装元素中删除position: absolute（您也可以从父级中删除position : relative;）。

这是updated fiddle。

两种解决方案仍然存在一些限制，因此您选择的解决方案取决于最终结果。 您还可以使用JS来操作和定位DOM的元素。

Answer 2

只需将这两个元素放在单独的div元素中，然后在<br>之间添加中断：

<div><a href="#" ng-model="collapsed" ng-click="collapsed=!collapsed" style="font-size:180%; color:#B9121B">R2A</a>
 <font size="4">...</font></p>
 <br>
 <div>
  <font class="boxed" ng-show="collapsed"size="4" >I am description</font>
 </div>  
</div>

或者将它们放在同一个span。

中

你也可能不得不摆弄边缘。