HTML CSS

KEEP HTML ELEMENTS ON THE SAME LINE

(quick guide & examples)

<div class="wrap-flex">   <p>1</p> <i>2</i> <img src="3.JPG"> </div>

.wrap-flex {   display: flex;   align-items: stretch; }

CSS FLEX LAYOUT

01

.wrap-grid {   display: grid;   grid-template-columns: repeat(3, 1fr); }

CSS GRID LAYOUT

02

<div class="wrap-grid">   <p>1</p> <i>2</i> <img src="3.JPG"> </div>

.wrap-table { display: table; } .wrap-table > * { display: table-cell; }

DISPLAY AS TABLE

03

<div class="wrap-table">   <p>1</p> <i>2</i> <img src="3.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>1</p> <i>2</i> <img src="3.JPG"> </div>

FLOAT ITEMS .wrap-float > * { display: block; float: left; }

<div class="wrap-iblock"> <p>1</p><i>2</i><img src="3.JPG"> </div>

.wrap-iblock > * { display: inline-block; }

INLINE BLOCK

05