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
|
<!DOCTYPE html>
<html>
<head>
<style>
#bloc {
position: relative;
}
#droite {
float: right;
display: bloc;
}
#gauche {
float: left;
display: bloc;
}
.push {
clear: both;
}
.bloc {
width: 30%;
}
</style>
</head>
<body>
<div id="bloc">
<span id="droite" class="bloc">
Droite:
<p>Praesent at neque nunc. Sed pulvinar nisi vel enim venenatis sollicitudin. Vestibulum posuere cursus suscipit. Morbi eleifend libero sed nisl volutpat auctor. Vivamus bibendum ipsum non dui bibendum accumsan. In nisi elit, mollis sed commodo sed, fringilla vitae leo. Pellentesque cursus tellus a sapien lobortis scelerisque. Proin feugiat vehicula orci sed euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam aliquet tortor vitae risus tincidunt tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam eu pretium ligula. Mauris aliquet, libero ac tincidunt vestibulum, sapien risus dictum justo, non dapibus lorem mauris sed mauris. Aenean felis urna, aliquam sit amet molestie quis, euismod at mauris. Etiam congue, felis id tincidunt tristique, massa tortor congue nisl, id dapibus leo risus a orci. Etiam quis eros mi, eget aliquet diam. Donec aliquet porttitor commodo. Cras ac nisl nulla, quis mollis purus. </p>
</span>
<span id="gauche" class="bloc">
Gauche:
<p>Sed ultrices volutpat lacus vitae pulvinar. Cras condimentum aliquet nunc rhoncus suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a sem arcu. Suspendisse potenti. Sed commodo cursus odio, sit amet posuere nisi ultricies ut. Cras sodales, sapien a adipiscing gravida, nibh arcu pretium leo, et convallis lectus nulla vel eros. Pellentesque faucibus rhoncus risus luctus euismod. Etiam elementum, mauris in egestas sagittis, mi ligula mattis enim, sed mollis libero enim sit amet nunc. Sed tristique porta nunc varius tristique. In massa quam, eleifend quis fringilla nec, vulputate faucibus quam. Nunc eget viverra sapien. Donec hendrerit euismod sapien eget dignissim. Maecenas laoreet, orci sit amet tempor rhoncus, nisl ante laoreet arcu, eget commodo ligula enim ac nulla. Mauris egestas sollicitudin justo ac dignissim. Nunc scelerisque laoreet dolor, et luctus tortor sagittis in. Fusce convallis lacinia est, in sodales est convallis vitae. </p>
</span>
<div class="push"></div>
</div>
</body>
</html> |
texte à gauche et à droite
Répondre avec citation
Partager