105 lines
3.2 KiB
HTML
105 lines
3.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" dir="ltr">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<link rel="stylesheet" href="css/styles.css">
|
||
|
|
<title>Flexbox test 1</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Flexbox test 1</h1>
|
||
|
|
|
||
|
|
<div id="t1" class="test">
|
||
|
|
<table>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Prénom</th>
|
||
|
|
<th>Nom</th>
|
||
|
|
<th>Action</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>Marcel</td>
|
||
|
|
<td>Aimé</td>
|
||
|
|
<td>Voir | Editer</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Robert</td>
|
||
|
|
<td>Pirate</td>
|
||
|
|
<td>Voir | Editer</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="t2" class="test">
|
||
|
|
<div class="table">
|
||
|
|
<div class="row">
|
||
|
|
<div class="cell">ID </div>
|
||
|
|
<div class="cell">Nr </div>
|
||
|
|
<div class="cell">Header 1 </div>
|
||
|
|
<div class="cell span4-5"> Header 2 </div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="cell">1</div>
|
||
|
|
<div class="cell">2</div>
|
||
|
|
<div class="cell">Content</div>
|
||
|
|
<div class="cell">Content</div>
|
||
|
|
<div class="cell">Content</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="cell">2</div>
|
||
|
|
<div class="cell">3</div>
|
||
|
|
<div class="cell span3-5">Content</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="cell">1</div>
|
||
|
|
<div class="cell">2</div>
|
||
|
|
<div class="cell span3-4">Content</div>
|
||
|
|
<div class="cell">Content</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="t3" class="test">
|
||
|
|
<div class="container">
|
||
|
|
<div class="item">Left<br>high</div>
|
||
|
|
<div class="item">Middle/Left - is wider</div>
|
||
|
|
<div class="item">Middle/Right</div>
|
||
|
|
<div class="item">Right</div>
|
||
|
|
|
||
|
|
<div class="item">Left</div>
|
||
|
|
<div class="item">Middle/Left</div>
|
||
|
|
<div class="item">Middle/Right</div>
|
||
|
|
<div class="item">Right</div>
|
||
|
|
|
||
|
|
<div class="item">Left</div>
|
||
|
|
<div class="item">Middle/Left</div>
|
||
|
|
<div class="item">Middle/Right<br>higher<br>higher</div>
|
||
|
|
<div class="item">Right</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="t4" class="test">
|
||
|
|
<div class="thegrid">
|
||
|
|
<!-- [HEAD] -->
|
||
|
|
<div class="head">Column 1</div>
|
||
|
|
<div class="head">Column 2</div>
|
||
|
|
<div class="head">Column 3</div>
|
||
|
|
<div class="head">Column 4</div>
|
||
|
|
<!-- [ROWS] -->
|
||
|
|
<div class="cell">Row 1 col 1</div>
|
||
|
|
<div class="cell">Row 1 col 2</div>
|
||
|
|
<div class="cell">Row 1 col 3</div>
|
||
|
|
<div class="cell">Row 1 col 4</div>
|
||
|
|
<!-- [ROWS] -->
|
||
|
|
<div class="cell">Row 2 col 1</div>
|
||
|
|
<div class="cell">Row 2 col 2</div>
|
||
|
|
<div class="cell">Row 2 col 3</div>
|
||
|
|
<div class="cell">Row 2 col 4</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|