使用纯CSS定位div

Question

This is a hard one to describe, but the fiddle shows what I want to do:

https://jsfiddle.net/zbh8ewqg/

I want to align the #inner div so that the top of the bottom div aligns with the top of the #outer div.

Not to tricky using JavaScript, but can it be done in pure CSS?

(Note: in practice the number of elements will be dynamic, and the height not known because, for example, the font may change, thus solutions with hard-coded numbers don't help. I'm not trying to transfer the calculation from JavaScript to my brain.)

Answer 1

try to add this code. It will give same output as mention on jsfiddle.

div#inner{
    position: absolute;
    top: -75px;
}

Answer 2

Not really sure what are you trying to achieve, because I would recommend changing the mark-up div arrangements. But anyway, here is a pure css alternative: https://jsfiddle.net/x8f2os39/

enter code here

Answer 3

If you add to your div's a fixed line-height then it can be very easy to calculate what value for top you need.

If:

div {
    line-height:20px;
}

Then you just need to add top:-80px to your #inner div (4 divs above, 20px each)

Fiddle