HTML-CSS: 3-tile layout
HTML-CSS : Exercise-36 with Solution
Using HTML, CSS aligns items horizontally using display: inline-block to create a 3-tile layout.
- Use display: inline-block to create a tiled layout, without using float, flex or grid.
- Use width in combination with calc to divide the width of the container evenly into 3 columns.
- Set font-size for .tiles to 0 to avoid whitespace and to 20px for <h2> elements to display the text.
- Note: If you use relative units (e.g. em), using font-size: 0 to fight whitespace between blocks might cause side effects.
HTML Code:
Explanation:
- The HTML document starts with the <!DOCTYPE html> declaration, which specifies the document type and version of HTML.
- <html> tags indicate the start and end of the HTML document.
- <head> section contains meta-information about the HTML document, such as character encoding and viewport settings.
- The <title> tag sets the title of the document, visible in the browser tab.
- <body> section contains the content of the HTML document.
- <div class="tiles"> defines a container for the tiles.
- Each tile is represented by <div class="tile"> and contains an image (<img>) and a heading (<h2>).
- The <img> tags display images of flowers with specified width and height attributes.
- The <h2> tags display headings for each tile.
CSS Code:
Explanation:
- .tiles:
- Sets the width of the container for the tiles to 600 pixels.
- Sets the font size to 0 to remove any potential whitespace between inline-block elements.
- Centers the container horizontally using auto margins.
- .tile:
- Sets the width of each tile to one-third of the container's width using the calc() function.
- Displays tiles as inline blocks, allowing them to appear horizontally next to each other.
- .tile h2:
- Sets the font size of headings within tiles to 20 pixels.
Go to:
PREV : Responsive layout with sidebar.
NEXT : Menu on image hover.
HTML-CSS Editor:
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.