Positionnement de blocs

**zadoner33** · 12/08/2013, 20h52

Bonjour à tous,

Voila, je fais face à un petit (gros) problème en terme de css. Je souhaiterais en effet disposer des bloc (de hauteur différente) à la suite et ce, en position relative.

Plus que des mots, voici l'exemple de manière illustré...

Voilà ce que je souhaite faire :
Nom : solution.jpg
Affichages : 46
Taille : 48,5 Ko

Nom : solution.jpg
Affichages : 46
Taille : 48,5 Ko

Voilà ce que j'obtiens :
Nom : probleme.png
Affichages : 43
Taille : 8,1 Ko

Je ne peux pas utiliser les positions absolute du fait que la grille sera "updatable".

Le bloc rouge vient se mettre vraiment bas alors que je voudrais qu'ils se mettent directement sous le 1er bloc vert... j'espère que vous suivez LOL

Quelqu'un aurait t'il une idée ? html 5 ?
si quelqu'un a déja vu une telle gallerie "dynamique avec des tailles différents avec les images qui "s'enchainent" comme il faut...

exemple en ligne : http://www.onkei.fr/probleme.html

**rodolphebrd** · 12/08/2013, 21h26

Bonjour,

merci de poster votre code HTML et CSS pour faciliter la compréhension du problème et l'aide.

**zadoner33** · 12/08/2013, 21h32

Re, je publie donc mon code, qui est relativement simple. Le but ce serait que les blocs se mettent vraiment à la suite les uns des autres pour obtenir le résultat que j'ai mis en image ci-dessus.

Code html :

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
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
 
<style>
* {
        margin: 0px;
        padding: 0px;
}
.case190 {
        position: relative;
        float: left;
        margin: 0px 0px 20px 20px;
        width: 190px;
        background-color: red;
}
.case400 {
        position: relative;
        float: left;
        margin: 0px 0px 20px 20px;
        width: 400px;
        background-color: green;
}
</style>
</head>
 
<body>
 
<div style="width: 840px; background-color: orange; overflow:hidden">
	<div class="case400" style="height: 400px;">1</div>
    <div class="case400" style="height: 300px;">2</div>
    <div class="case400" style="height: 500px;">3</div>
    <div class="case190" style="height: 100px;">4</div>
    <div class="case190" style="height: 200px;">5</div>
 
    <div class="case190">6</div>
    <div class="case190">7</div>
    <div class="case190">8</div>
    <div class="case190">9</div>
 
</div>
 
</body>
</html>

**rodolphebrd** · 12/08/2013, 21h55

Voici une solution simple :
En modifiant votre HTML vous avez cela :

Code html :

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
<div class="container" style="width: 840px; background-color: orange;">
  <div class="left">
    <div class="case400" style="height: 400px;">1</div>
    <div class="box-left">
      <div class="case190" style="height: 100px;">4</div>
      <div class="case190">8</div>
      <div class="case190">6</div>
      <div class="case190">7</div>
    </div>
    <div class="box-right">
      <div class="case190" style="height: 200px;">5</div>
      <div class="case190">9</div>
    </div>
  </div>
  <div class="right">
    <div class="case400" style="height: 300px;">2</div>
    <div class="case400" style="height: 500px;">3</div>
  </div>
</div>

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
* {
	margin: 0px;
	padding: 0px;
}
.container:after {
	content: "";
	display: block;
	clear: both;
}
.case190 {
	margin: 0px 0px 20px 20px;
	width: 190px;
	background-color: red;
}
.case400 {
	position: relative;
	margin: 0px 0px 20px 20px;
	width: 400px;
	background-color: green;
}
.left, .right, .box-left, .box-right {
	float: left;
}

http://codepen.io/anon/pen/tnGmc

Positionnement de blocs

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager