CODEWITHSUNDEEP
htmlcssionic-framework
Hana
Hana

Reputation: 239

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

Upvotes: 0

Views: 611

Answers (2)

Pugazh
Pugazh

Reputation: 9561

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.

Update: I have hidden the text by default, it will be visible when you hover on the link.

.wrapper {
  position: relative;
}
.wrapper div {
  display: inline-block;
}
.wrapper div.boxed {
  z-index: 1;
  padding: 5px 10px;
  background-color: palegreen;
  display: none;
  position: absolute;
  border: 1px solid forestgreen;
  border-radius: 5px;
}
.jargon-item a:hover + .boxed {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
  Some more text here. You can add more text if you want. You can also include another link here.
  <div class="jargon-item">
    <a href="javascript:void(0)" ng-model="collapsed1" ng-click="collapsed1=!collapsed1">Click me</a>...
    <div class="boxed" ng-show="collapsed1">I added this !</div>
  </div>
</div>
<br>
<br>
<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>

Upvotes: 3

Hilario Goes
Hilario Goes

Reputation: 453

Apply float:left to every element.

Upvotes: -1

Related Questions