G146: Using Liquid Layout - W3C

Trang chủ » Html Fluid Layout Div » G146: Using Liquid Layout - W3C

Có thể bạn quan tâm

Example 1: Simple liquid layout in HTML and CSS

The following fairly simple example uses HTML and CSS to create a liquid layout. The three columns adjust their size as text size is adjusted. When the total horizontal width exceeds the available width of the columns, the last column wraps to be positioned below, rather than beside, the previous column. The font size can be increased without either clipping or introducing horizontal scrolling until the longest word no longer fits in a column. This particular example uses percent sizes for the columns and defines them as floating regions using the "float" property.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of Basic Liquid Layout</title> <style> .column { border-left: 1px solid green; padding-left:1%; float: left; width: 32%; } .column:nth-of-type(1){ border:0; } footer { border-top: 1px solid green; clear: both; } </style> </head> <body> <h1>WCAG Example</h1> <h2>Text in Three Columns</h2> <div class="column"> <h3>Block 1</h3> <p>The objective of this technique is to be able to present content without introducing horizontal scroll bars by using layout techniques that adapt to the available horizontal space.</p> </div> <div class="column"> <h3>Block 2</h3> <p>This is a very simple example of a page layout that adapts as the text size changes.</p> </div> <div class="column"> <h3>Block 3</h3> <p>For techniques that support more complex page layouts, see the Resources listed below.</p> </div> <footer> <p>Footer text</p> </footer> </body> </html>

Từ khóa » Html Fluid Layout Div