(XHTML / CSS) Grid - Blog Display

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Yanick  vB

Yanick vB

01/12/2012 14:09:27
Quote Anchor link
Hallo,

Ik zit met een probleem, ik wil het volgende na maken in HTML / CSS:

http://i45.tinypic.com/3525cgz.png
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)
PHP script in nieuw venster Selecteer het PHP script
1
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>


Groeten,
Yanick vB
Gewijzigd op 01/12/2012 14:11:01 door Yanick vB
 
PHP hulp

PHP hulp

06/12/2021 16:13:22
 
Joris van Rijn

Joris van Rijn

01/12/2012 14:27:14
Quote Anchor link
Ik meen me te herinneren dat iemand hier ooit een jQuery pluginnetje voor geschreven heeft. Ik kan de website alleen niet zo 123 meer vinden. Maar misschien moet je even naar javascript (dan wel jQuery) kijken?
 
Richard Hansma

Richard Hansma

01/12/2012 14:38:54
Quote Anchor link
http://masonry.desandro.com/
Gewijzigd op 01/12/2012 14:39:11 door Richard Hansma
 
Yanick  vB

Yanick vB

01/12/2012 16:01:08
Quote Anchor link
Jammer dat je Javascript moet gebruiken om dit werken te krijgen, zou er geen manier zijn om dit in HTML / CSS te doen?

Idd bedankt maar als iemand weet hoe het met HTML / CSS kan hoor ik het graag.
 
Wouter J

Wouter J

01/12/2012 16:20:49
Quote Anchor link
Je kan het doen met alleen HTML en CSS, maar de JS versie vind ik zelf prettiger.

http://jsbin.com/ucejig/1/edit
 
Frank Nietbelangrijk

Frank Nietbelangrijk

01/12/2012 16:31:54
Quote Anchor link
Als eerste drie div's maken die naast elkaar komen te staan. in de css moet je dan gebruik maken van float:left;. Daarna in iedere div weer nieuwe divs maken. De container div zorgt er voor dat de drie divs naast elkaar blijven ook als het venster te klein is. Hou er rekening mee dat je bij de breedte van de divs nogeens de magrinbreedte en de borderbreedte erbij moet tellen (*2). dus een div met width 100px en een margin van 5px en een border van 1px neemt in totaal 112px in beslag. voorbeeldje:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>
Gewijzigd op 01/12/2012 16:38:58 door Frank Nietbelangrijk
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.