Aligner le contenu d'une colonne à un autre

**winlogon2** · 04/03/2014, 22h24

Salut à tou(te)s, gros débutant ici,

Je cherche un moyen d'aligner des éléments (texte, éventu image, etc) selon le contenu d'une autre colonne. Vous comprendrez mieux avec cette illustration :

Nom : blabla.png
Affichages : 116
Taille : 15,9 Ko

Nom : blabla.png
Affichages : 116
Taille : 15,9 Ko

https://www.dropbox.com/s/urhs2jindagyfi3/blabla.png

Je n'ai aucune idée de par où commencer pour ça.. Une idée ? merci !

(Ps: je voudrais éviter de bricoler avec des tableaux et cellules.. plutôt quelque chose de plus "fluide")

**Bisûnûrs** · 05/03/2014, 10h32

A mon avis, à part récupérer la position de tes éléments en Javascript puis d'affecter une marge haute à tes deux autres éléments, je vois pas ..

**Candygirl** · 05/03/2014, 19h58

On pourrait imaginer quelque chose du genre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Cependant il y a plusieurs problèmes: un chevauchement possible dans les "colonnes", un alignement sur la dernière ligne si le libellé est sur 2 lignes (on pourrait imaginer placer le contenu des colonnes avant dans le html pour le prévenir mais il faudrait gérer le cas en début de ligne),...