There is a list of posts. Some posts have class left , others have right .

I need to somehow form 2 pseudo-columns, where the posts are with the class left on the left, and with the right on the right. Moreover, it is necessary to implement this with the help of CSS, since for certain reasons I cannot implement it in the normal way (create two columns and display the posts in the appropriate ones).

I started by using the float property, but I found that there are vertical 'spaces' between posts in this case.

I understand that it sounds terribly stupid. Is this even possible to implement?

    2 answers 2

    So that there are no spaces margin: 0;

    In general, I always wrap in divs).

    css:

     .left,.right,#post_wall{ width:300px; } .left{ text-align:left; } .right{ text-align:right; } #post_wall{ height:100px; }

    html:

     <div id="post_wall"> <div class="left">я слева</div> <div class="right">я справа</div> <div class="left">я слева</div> <div class="right">я справа</div> <div> 

       section { display: flex; flex-direction: column; flex-wrap: wrap; height: 30em; } .left { order: -1; } .right { order: 1; } section:before { content: ""; height: 100%; } 
       <section> <div class="left">Left</div> <div class="left">Left again</div> <div class="right">Right</div> <div class="right">Right again</div> <div class="left">Left once more</div> <div class="right">Right once more</div> </section>