1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
| <!DOCTYPE html>
<html lang="fr">
<head>
<title>Les images fluides</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8" />
<style>
h1, h2, h4, p, figure, img {
margin: 0;
}
#container {
width: 80%;
max-width: 1200px;
margin: 2% auto;
}
header, footer {
background-color: #000;
color: #fff;
text-align: center;
}
main {
background-color: #f9f9f9;
}
article, aside {
display: table-cell;
padding: 1.0416666667%; /* (10x100)/960=1,0416666667% */
}
article {
width: 37.3958333333%; /* (359x100)/960=37,3958333333% */
border-right: 1px solid #000;
}
aside {
width: 18.75%; /*(180x100)/960=18,75% */
background-color: #ddd;
}
figure {
width: 100%;
}
figure img {
max-width: 100%;
}
p ~ p, h4 ~ h4 {
margin-top: 20px;
}
</style>
</head>
<body>
<div id="container">
<header>
<h1>Lorem ipsum dolor sit amet, consectetur adipisici elit amari</h1>
</header>
<main>
<article>
<h2>Prima luce cum quibus</h2>
<figure><img src="loutre.jpg" alt="Une loutre" /></figure>
<p>Magna pars studiorum, prodita quaerimus. Morbi fringilla convallis sapien, id pulvinar odio volutpat. Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Pellentesque habitant morbi tristique senectus et netus. Nec dubitamus multa iter quae et nos invenerat. Cum sociis natoque penatibus et magnis dis parturient. Gallia est omnis divisa in partes tres, quarum. Curabitur blandit tempus ardua ridiculus sed magna. Prima luce, cum quibus mons aliud consensu ab eo. Plura mihi bona sunt, inclinet, amari petere vellent.</p>
<p>Etiam habebis sem dicantur magna mollis euismod. At nos hinc posthac, sitientis piros Afros. Curabitur blandit tempus ardua ridiculus sed magna. Phasellus laoreet lorem vel dolor tempus vehicula. Fictum, deserunt mollit anim laborum astutumque! Quid securi etiam tamquam eu fugiat nulla pariatur.</p>
</article>
<article>
<h2>Mons aliud consensu</h2>
<figure><img src="tigre.jpg" alt="Un tigre" /></figure>
<p>Curabitur blandit tempus ardua ridiculus sed magna. Gallia est omnis divisa in partes tres, quarum. Contra legem facit qui id facit quod lex prohibet. Plura mihi bona sunt, inclinet, amari petere vellent. Fabio vel iudice vincam, sunt in culpa qui officia. Ullamco laboris nisi ut aliquid ex ea commodi consequat. Quo usque tandem abutere, Catilina, patientia nostra? Quid securi etiam tamquam eu fugiat nulla pariatur. Quisque ut dolor gravida, placerat libero vel, euismod. Unam incolunt Belgae, aliam Aquitani, tertiam.</p>
</article>
<aside>
<h4>At nos hinc posthac</h4>
<p>Gallia est omnis divisa in partes tres, quarum. Curabitur blandit tempus ardua ridiculus sed magna. Prima luce, cum quibus mons aliud consensu ab eo. Plura mihi bona sunt, inclinet, amari petere vellent. Etiam habebis sem dicantur magna mollis euismod.</p>
<h4>Plura mihi bona sunt</h4>
<p>Curabitur blandit tempus ardua ridiculus sed magna. Phasellus laoreet lorem vel dolor tempus vehicula. Fictum, deserunt mollit anim laborum astutumque! Quid securi etiam tamquam eu fugiat nulla pariatur.</p>
</aside>
</main>
<footer>
<p>Curabitur est gravida et libero vitae dictum.</p>
</footer>
</div>
</body>
</html> |
