Geek asks and answers

Is there any way to align an element with its "grandfather" without jQuery / javascript?

I need to align the element to the edge of its "grandparent".

Here is a sample code:

<div id='grandparent'>
  <div class='parent' style='display:inline-block'>
    <div class='child'></div>
  </div>
  <div class='parent' style='display:inline-block'>
    <div class='child'></div>
  </div>
  <div class='parent' style='display:inline-block'>
    <div class='child'></div>
  </div>
  <div class='parent' style='display:inline-block'>
    <div class='child'></div>
  </div>
</div>

That way, the .parent elements will be placed inline, which will depend on the width of the #grandparent element. I need each .child element to be on the left edge of #grandparent.

Is it likely that this is possible without javascript?

+5
source share
1 answer

Assign a relative position for grandparents and an absolute position for children. Then use the top, left, bottom, and right properties of the child elements (as for the boundaries of grandparents) to get the desired effect.

+4
source

More articles:


All Articles