+ 1

Align the svg at the extreme bottom-right?

I have made a four cards and have added a svg using FONT AWESOME. I want to align the svg in the bottom right of the container/div/card. I have moved it to the right in the below mentioned code, you can see in the code. The code link is as follows: https://code.sololearn.com/Wm9F4ADYca4R/#html Please mention the svg code or the the solved code link. THANK YOU

20th Apr 2020, 3:03 PM
Adarsh Mamgain
Adarsh Mamgain - avatar
3 Réponses
+ 1
There are many ways to do so, but you should use flexbox on card so that, you can grow the body part, thus it will push icon to bottom
21st Apr 2020, 1:59 PM
Arvind Singh Rawat
Arvind Singh Rawat - avatar
+ 1
can you please provide with the code Arvind Singh Rawat
21st Apr 2020, 2:23 PM
Adarsh Mamgain
Adarsh Mamgain - avatar
0
CSS: .card{ display: flex; flex-flow: column; } .card .icon{ align-self: flex-end; margin: 14px; } .card .description{ flex-grow: 1; } In HTML, add class 'card' to your <div id="#cardx">, add class "description" to paragraph and add class icon to <i> Eg: <div id="card2" class="card"> <h3>Supervisor</h3> <p class="f description">Monitors activity to identify project roadblocks</p> <i class="fas fa-user-tie fa-2x icon"></i> </div> <br> You can also try playing with position absolute and right and bottom attributes.
21st Apr 2020, 2:34 PM
Arvind Singh Rawat
Arvind Singh Rawat - avatar