andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update and rename remove-inline-block-container-white-space.md to tile-layout-using-inline-block.md

Browse Source
This commit is contained in:
Angelos Chalaris
2019-10-02 09:51:59 +03:00
committed by GitHub
parent 184592b01d
commit ac36405496
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
snippets/remove-inline-block-container-white-space.md → snippets/tile-layout-using-inline-block.md
View File

@ -1,9 +1,9 @@
--- ---
title: Remove inline-block container whitespace title: 3-tile layout
tags: layout, beginner tags: layout,beginner
--- ---
Creates a bouncing loader animation. Align items horizontally using `display: inline-block` to create a 3-tile layout.
```html ```html
<div class="tiles"> <div class="tiles">
@ -24,13 +24,13 @@ Creates a bouncing loader animation.
```css ```css
.tiles { .tiles {
width: 900px; width: 900px;
font-size: 0; font-size: 0;
} }
.tile { .tile {
width: calc(900px / 3); width: calc(900px / 3);
display: inline-block; display: inline-block;
} }
.tile h2 { .tile h2 {
@ -40,11 +40,11 @@ Creates a bouncing loader animation.
#### Explanation #### Explanation
1. `tiles` is the container of the tile component - Use `display: inline-block` to create a tiled layout, without using `float`, `flex` or `grid`.
2. `tile` is the item that we need to display inline - `.tiles` is the container component, `.tile` is an item that needs to be displayed inline.
3. `width: calc((900px / 3) - 10px)` divides the width of the tile evenly - Use `width: calc((900px / 3))` to divide the width of the container evenly into 3 columns.
4. Set `font-size: 0;` on `.tiles` to avoid whitespace - Set `font-size: 0;` on `.tiles` to avoid whitespace.
5. Set `font-size: 20px` to `h2` in order to display the text - Set `font-size: 20px` to `h2` in order to display the text.
#### Browser support #### Browser support