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

Fix 3-tile layout

Browse Source
This commit is contained in:
Angelos Chalaris
2020-04-20 12:05:22 +03:00
parent 8652ac9752
commit 2b8884280b
1 changed files with 9 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
snippets/tile-layout-using-inline-block.md
View File

@ -8,28 +8,29 @@ Align items horizontally using `display: inline-block` to create a 3-tile layout
```html ```html
<div class="tiles"> <div class="tiles">
<div class="tile"> <div class="tile">
<img class="tile_image" src="https://via.placeholder.com/250x150" alt="placeholder" > <img src="https://via.placeholder.com/200x150">
<h2 class="tile_title">30 Seconds of CSS</h2> <h2>30 Seconds of CSS</h2>
</div> </div>
<div class="tile"> <div class="tile">
<img class="tile_image" src="https://via.placeholder.com/250x150" alt="placeholder" > <img src="https://via.placeholder.com/200x150">
<h2 class="tile_title">30 Seconds of CSS</h2> <h2>30 Seconds of CSS</h2>
</div> </div>
<div class="tile"> <div class="tile">
<img class="tile_image" src="https://via.placeholder.com/250x150" alt="placeholder" > <img src="https://via.placeholder.com/200x150">
<h2 class="tile_title">30 Seconds of CSS</h2> <h2>30 Seconds of CSS</h2>
</div> </div>
</div> </div>
``` ```
```css ```css
.tiles { .tiles {
width: 900px; width: 600px;
font-size: 0; font-size: 0;
margin: 0 auto;
} }
.tile { .tile {
width: calc(900px / 3); width: calc(600px / 3);
display: inline-block; display: inline-block;
} }
@ -47,5 +48,3 @@ Align items horizontally using `display: inline-block` to create a 3-tile layout
- 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
- https://www.caniuse.com/#search=inline-block