Tachyons Layout Floats
In this article, we will learn about floats using the Tachyons toolkit. Tachyon is a toolkit used to develop a responsive website. Float is used to specify whether an element should float to the left, right, or not at all.
Tachyons Layout Floats Classes:
- fr: This float-right (fr) class is used to float elements to the right.
- fl: This float-left(fl) class is used to float elements to the left.
- fn: This float-none(fn) class is used to float elements to nowhere.
Syntax:
<div class="fr"> ... </div>
Example 1: In the below code, we will use the float-right fr class to float the div element to the right.
HTML
<!DOCTYPE html><html lang="en"> <head> <link rel="stylesheet" href= <style> div { text-align: center; background-color: lightgreen; width: 150px; height: 150px; } </style></head> <body> <h2 style="color:green; text-align:center;"> GeeksforGeeks </h2> <h3 style="text-align:center;"> A computer science portal for geeks </h3> <div class="fr">gfg</div></body> </html> |
Output:
Example 2: In the below code, we will use the float-left fl class to float the div element to the left.
HTML
<!DOCTYPE html><html lang="en"> <head> <link rel="stylesheet" href= <style> div { text-align: center; background-color: lightgreen; width: 150px; height: 150px; } </style></head> <body> <h2 style="color:green; text-align:center;"> GeeksforGeeks </h2> <h3 style="text-align:center;"> A computer science portal for geeks </h3> <div class="fl">gfg</div></body> </html> |
Output:
Example 3: In the below code we will use the float-none fn class to float the div element to nowhere.
HTML
<!DOCTYPE html><html lang="en"> <head> <link rel="stylesheet" href= <style> div { text-align: center; background-color: lightgreen; width: 150px; height: 150px; } </style></head> <body> <h2 style="color:green; text-align:center;"> GeeksforGeeks </h2> <h3 style="text-align:center;"> A computer science portal for geeks </h3> <div class="fn">gfg</div></body> </html> |
Output:
Reference: https://tachyons.io/docs/layout/floats/
Please Login to comment...