objB
objC<...">
Clever Geek Handbook

Css align vertically defined divs

I currently have the following html:

<div>objA</div>
<div class="tower">objB</div>
<div class="tower">objC</div>
<div class="tower">objD</div>
<div>objE</div>
<div>objF</div>
<div>objG</div>
<div>objH</div>
<div>objI</div>
<div>objJ</div>

I would like to align (vertically align) the divs in the tower class so that the following image can be reproduced:

"div-tower"

Instead, I have the following:

http://jsfiddle.net/kAMB5/

Are there any ways that I could achieve my desired result via css alone? (preferably without changing the html content)

UPDATE . You can assume these are fixed width separators.

+3


source to share


2 answers


You need additional div

packaging .tower

as in: http://jsfiddle.net/kAMB5/4/



Also, CSS Grid Layout (IE10) or on your .tower

CSS3 flexbox (still needs a container, which I think) could achieve the same result but with less compatibility

+1


source


You need to put objC and objD divs inside objB div like this DEMO to achieve your desired result:

HTML:



<div>objA</div>
<div>
    objB
    <div class="tower">objC</div>
    <div class="tower">objD</div>
</div>
<div>objE</div>
<div>objF</div>
<div>objG</div>
<div>objH</div>
<div>objI</div>
<div>objJ</div>
+3


source






More articles:


All Articles