The initial level of elements with vertical styling

Question

I have a container with vertically stacked items.

<div> <div>line 1</div> <div>line 2</div> <div>line 3</div> <div>line 4</div> </div> 

I want the baseline of the container to be identical to the baseline of a particular one of its elements, let’s say, the third. It should look like this:

How to do it using CSS?

As a related question, how is the base level of such a container with vertically stacked elements usually determined?

I want to provide this container with the display: inline-block property. This container appears next to other elements on the line, and I want them to be aligned according to the baseline.

Answer 1

This makes the baseline of the container match the baseline of the third child div .

 .container > div:nth-of-type(3) ~ div { float: left; clear: both; } 

<strong> Examples:

 .container { display: inline-block; background: yellow; padding: 0 0.5em; width: 8em; } .b1 > div:nth-of-type(1) ~ div { float: left; clear: both; } .b2 > div:nth-of-type(2) ~ div { float: left; clear: both; } .b3 > div:nth-of-type(3) ~ div { float: left; clear: both; } .b4 > div:nth-of-type(4) ~ div { float: left; clear: both; } .container > div:nth-of-type(1) { font-size: 14px; } .container > div:nth-of-type(2) { font-size: 16px; } .container > div:nth-of-type(3) { font-size: 24px; } .container > div:nth-of-type(4) { font-size: 20px; } 

 <div class="container b1"> <div>baseline</div> <div>line 2</div> <div>line 3</div> <div>line 4</div> </div> <div class="container"> Lorem ipsum dolor sit amet </div> <div class="container"> consectetur adipiscing elit, sed do eiusmod tempor incididunt </div> <hr> <div class="container b2"> <div>line 1</div> <div>baseline</div> <div>line 3</div> <div>line 4</div> </div> <div class="container"> Lorem ipsum dolor sit amet </div> <div class="container"> consectetur adipiscing elit, sed do eiusmod tempor incididunt </div> <hr> <div class="container b3"> <div>line 1</div> <div>line 2</div> <div>baseline</div> <div>line 4</div> </div> <div class="container"> Lorem ipsum dolor sit amet </div> <div class="container"> consectetur adipiscing elit, sed do eiusmod tempor incididunt </div> <hr> <div class="container b4"> <div>line 1</div> <div>line 2</div> <div>line 3</div> <div>baseline</div> </div> <div class="container"> Lorem ipsum dolor sit amet </div> <div class="container"> consectetur adipiscing elit, sed do eiusmod tempor incididunt </div> 

Answer 2

If I understood your question correctly, something like this might work:

 body { line-height: 18px; /* set a line height and use it to calculate the offsets later */ } div { position: relative; display: inline-block; vertical-align: baseline; background: black; color: white; } div > div { display: block; } div.align-1 > div:nth-child(2) { position: absolute; bottom: -18px; /* 1 x line-height of parent */ } div.align-1 > div:nth-child(3) { position: absolute; bottom: -36px; /* 2 x line-height of parent */ } div.align-1 > div:nth-child(4) { position: absolute; bottom: -54px; /* 3 x line-height of parent */ } div.align-2 > div:nth-child(3) { position: absolute; bottom: -18px; /* 1 x line-height of parent */ } div.align-2 > div:nth-child(4) { position: absolute; bottom: -36px; /* 2 x line-height of parent */ } div.align-3 > div:nth-child(4) { position: absolute; bottom: -18px; /* 1 x line-height of parent */ } 

  Text <div class="align-1"> <div>line 1</div> <div>line 2</div> <div>line 3</div> <div>line 4</div> </div> more text <br> <br> <br> <br> <hr /> <br> Text <div class="align-2"> <div>line 1</div> <div>line 2</div> <div>line 3</div> <div>line 4</div> </div> more text <br> <br> <br> <hr /> <br> Text <div class="align-3"> <div>line 1</div> <div>line 2</div> <div>line 3</div> <div>line 4</div> </div> more text <br> <br> <hr /> <br> Text <div class="align-4"> <div>line 1</div> <div>line 2</div> <div>line 3</div> <div>line 4</div> </div> more text <br> <hr /> 

If you use sass or less, you can do this in a dynamic mixin that will work with counting variable elements.