HTML CSS
(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; }
.wrap-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
<div class="wrap-grid"> <p>1</p> <i>2</i> <img src="3.JPG"> </div>
.wrap-table { display: table; } .wrap-table > * { display: table-cell; }
<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; }
<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; }