(XHTML / CSS) Grid - Blog Display
Ik zit met een probleem, ik wil het volgende na maken in HTML / CSS:
Let op: de hoogte van de rode vakken verschillen en het aantal items ook.
Ik had het al eens werkend maar toen gebruikte ik een extra div genaamd .row (zie hieronder) wat ik niet wil. Ik wil gewoon alle .item onder elkaar hebben en dat ze dan goed worden uitgelijnd. (zie de foto). Ik denk dat ik met display: table-cell moet gaan werken, maar ik kom er niet uit.
Zou iemand mij opweg kunnen helpen?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="row">
<div class="item"> content </div>
<div class="item"> content </div>
<div class="item"> content </div>
</div>
<div class="row">
<div class="item"> content </div>
<div class="item"> content </div>
<div class="item"> content </div>
</div>
<div class="row">
<div class="item"> content </div>
<div class="item"> content </div>
<div class="item"> content </div>
</div>
<div class="item"> content </div>
<div class="item"> content </div>
<div class="item"> content </div>
</div>
<div class="row">
<div class="item"> content </div>
<div class="item"> content </div>
<div class="item"> content </div>
</div>
<div class="row">
<div class="item"> content </div>
<div class="item"> content </div>
<div class="item"> content </div>
</div>
Groeten,
Yanick vB
Gewijzigd op 01/12/2012 14:11:01 door Yanick vB
Idd bedankt maar als iemand weet hoe het met HTML / CSS kan hoor ik het graag.
http://jsbin.com/ucejig/1/edit
Code (php)
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
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
<!DOCTYPE html>
<html>
<head>
<style>
div.container
{
width:366px;
border:1px solid red;
}
div.columns
{
float:left;
width:110px;
margin:5px;
border:1px solid blue;
}
div.content
{
width:100px;
margin:5px;
border:1px solid green;
}
</style>
</head>
<body>
<div class="container">
<div class="columns">
<div class="content"><p>Try resizing the window to see what happens when the images does not have enough room.</p>
</div>
<div class="content"><p>Try resizing the window to see what happens when the images does not have enough room.</p>
</div>
<div class="content"><p>Try resizing the window to see what happens when the images does not have enough room.</p>
</div>
</div>
<div class="columns">
<div class="content"><p>Try resizing the window to see what happens.</p></div>
<div class="content"><p>Try resizing the window to see what happens.</p></div>
</div>
<div class="columns">
<div class="content"><p>Try resizing the window.</p></div>
<div class="content"><p>Try resizing the window.</p></div>
<div class="content"><p>Try resizing the window.</p></div>
<div class="content"><p>Try resizing the window.</p></div>
</div>
</div>
</body>
</html>
<html>
<head>
<style>
div.container
{
width:366px;
border:1px solid red;
}
div.columns
{
float:left;
width:110px;
margin:5px;
border:1px solid blue;
}
div.content
{
width:100px;
margin:5px;
border:1px solid green;
}
</style>
</head>
<body>
<div class="container">
<div class="columns">
<div class="content"><p>Try resizing the window to see what happens when the images does not have enough room.</p>
</div>
<div class="content"><p>Try resizing the window to see what happens when the images does not have enough room.</p>
</div>
<div class="content"><p>Try resizing the window to see what happens when the images does not have enough room.</p>
</div>
</div>
<div class="columns">
<div class="content"><p>Try resizing the window to see what happens.</p></div>
<div class="content"><p>Try resizing the window to see what happens.</p></div>
</div>
<div class="columns">
<div class="content"><p>Try resizing the window.</p></div>
<div class="content"><p>Try resizing the window.</p></div>
<div class="content"><p>Try resizing the window.</p></div>
<div class="content"><p>Try resizing the window.</p></div>
</div>
</div>
</body>
</html>
Gewijzigd op 01/12/2012 16:38:58 door Frank Nietbelangrijk