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
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
body {
font 85% Arial,sans-serif;
}
#page {
width:60em;
max-width:100%;
margin:0 auto;
position:relative;
}
#content {
margin:0 20%;
padding:1em 2%;
border:1px solid black;
line-height:1.25em;
text-align:justify;
}
figure {
display:inline;
margin:0;
padding:0;
}
figcaption {
position:absolute;
width:18%;
right:0;
margin:-1.25em 0 0 0;padding:0;
}
.colgauche figcaption {
left:0;
}
mark {
background:none;
}
.colgauche mark {
border:1px solid red;
}
.coldroite mark {
border-bottom:1px solid green;
}
</style>
</head>
<body>
<div id="page">
<div id="content">
Lorem <figure class="coldroite"><mark>ipsum</mark><figcaption>ce texte apparaît dans la colonne de droite</figcaption></figure> dolor sit <figure class="colgauche"><mark>amet</mark><figcaption>ce texte apparaît dans la colonne de gauche</figcaption></figure>, consectetur adipiscing elit.
In ornare scelerisque leo at viverra.<br>
Sed id orci a orci aliquam mollis.<br>
Ut scelerisque ipsum eros, a luctus dolor tempor eget. Sed accumsan, tellus vel sollicitudin gravida, nulla est <figure class="coldroite"><mark>vestibulum</mark><figcaption>ce texte apparaît dans la colonne de droite</figcaption></figure> urna, id semper felis nulla eu nisi. Aliquam erat volutpat. Quisque nec consectetur lectus, at elementum tortor. Cras pulvinar metus nibh, ac sagittis tellus condimentum vel.<br>
Pellentesque volutpat magna egestas tempor dapibus.
Nam accumsan lacinia turpis, ut <figure class="colgauche"><mark>fringilla massa</mark><figcaption>ce texte apparaît dans la colonne de gauche</figcaption></figure>. Duis rutrum leo eu nunc sollicitudin imperdiet. Suspendisse placerat eros massa, ac suscipit quam tincidunt at. Praesent metus leo, egestas in arcu non, <figure class="coldroite"><mark>elementum placerat</mark><figcaption>ce texte apparaît dans la colonne de droite</figcaption></figure> libero. Mauris eros elit, mattis in vestibulum in, faucibus ut diam. Sed in pretium eros. Pellentesque rutrum porttitor augue porttitor <figure class="colgauche"><mark>malesuada</mark><figcaption>ce texte apparaît dans la colonne de gauche</figcaption></figure>. Duis sed sagittis erat.</div>
</div>
</body>
</html> |
Partager