Bonjour à tous,
Je voudrais afficher un ensemble de div de manière ordonnée. Les divs doivent être placés l'un à côté de l'autre et les uns au dessus des autres. Enfin bref, ils doivent former un tableau (j'espère que je suis assez clair).
Voici où j'en suis. Mon souci actuel est que les div sont décalés. Cet exemple doit afficher un "tableau" de 3 lignes et 2 colonnes.
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 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Je dbute en jQuery</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" /> <style type="text/css"> #parking{ background: #FAD7A3; border: 2px solid #FFFF00; height: 500px; position: relative; overflow-y: scroll; } .voiture{ position: relative; top:10px; left:10px; width: 80px; height: 80px; background:#33CCFF; margin-bottom:20px; } .voiture2{ position: relative; top:10px; left:150px; width: 80px; height: 80px; background:#33FFCC; margin-bottom:20px; } </style> <script type="text/javascript"> jQuery(document).ready(function($){ $( ".voiture" ).draggable({ containment: 'parent' }); $( ".voiture2" ).draggable({ containment: 'parent' }); }); </script> </head> <body> <div id="parking"> <div class="voiture">1</div> <div class="voiture">2</div> <div class="voiture2">3</div> <div class="voiture2">4</div> </div> </body> </html>
Il me manque les propriétés CSS qui vont bien à appliquer sur chaque div. Je voudrais pouvoir les rendre draggable dans un autre plus grand div par la suite.
Merci beaucoup.
Partager