HTML CSS
HOW TO KEEP HTML ELEMENTS ON THE SAME LINE
<div class="wrap-flex"> <p>Foo.</p> <span>Bar.</span> <img src="img.jpg"/> </div>
.wrap-flex { display: flex; width: 100%; }
CSS FLEX LAYOUT
01
.wrap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
CSS GRID LAYOUT
02
<div class="wrap-grid"> <p>Foo.</p> <span>Bar.</span> <img src="img.jpg"/> </div>
.wrap-table { display: table; } .wrap-table > * { display: table-cell; }
DISPLAY AS TABLE
03
<div class="wrap-table"> <p>Foo.</p> <span>Bar.</span> <img src="img.jpg"/> </div>
CLEARFIX .wrap-float { overflow: auto; width: 100%; } .wrap-float::after { content: ""; clear: both; display: table; }
FLOATING CONTAINERS
04
<div class="wrap-float"> <p>Foo.</p> <span>Bar.</span> <img src="img.jpg"/> </div>
FLOAT ITEMS .wrap-float > * { display: block; float: left; }
<div class="wrap-iblock"> <p>Foo.</p><!-- --><span>Bar.</span><!-- --><img src="img.jpg"/> </div>
.wrap-iblock > * { display: inline-block; }
INLINE BLOCK
05