Hana Hana - 5 months ago 10
CSS Question

Align text beside a div

I am trying to create clickable words inside a text. Each time the user clicks on a word, a window opens up underneath it.

Here is an example: image

My problem is every clickable word is not aligned with the text (line breaks, misalignment, etc) as you can see in the photo.



<p>Salut, Welcome, Bienvenue chez
<div class="jargon-item">
<a href="javascript:void(0)" ng-model="collapsed1" ng-click="collapsed1=!collapsed1"> R2A</a>...
<div class="boxed" ng-show="collapsed1">Rhone-Alpes Auvergne</div>
</div>
</p>





It is happening because it is how works, but I cannot change that because i need the window to be exactly under the word.
Thank you for your help

Answer

Do not wrap div's using p. Instead use a div to wrap other div's

  1. Adding display: inline or display: inline-block will modify the default display property of div.

  2. Use position: relative to the parent and position: absolute to the child .boxed

Note: By default div's are displayed as block.

.wrapper {
  position: relative;
}
.wrapper div {
  display: inline-block;
}
.wrapper div.boxed {
  display: block;
  position: absolute;
}
<div class="wrapper">
  Salut, Welcome, Bienvenue chez
  <div class="jargon-item">
    <a href="javascript:void(0)" ng-model="collapsed1" ng-click="collapsed1=!collapsed1">R2A</a>...
    <div class="boxed" ng-show="collapsed1">Rhone-Alpes Auvergne</div>
  </div>
</div>

Comments