PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
Y

(XHTML / CSS) Grid - Blog Display

Door Yanick vB op 01-12-2012 14:09 gewijzigd op 01-12-2012 14:11
2.088 views
Hallo,

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?



<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
Joris van Rijn
01-12-2012 14:27
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?
Y
Yanick vB
01-12-2012 16:01
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.
Frank Nietbelangrijk
01-12-2012 16:31 gewijzigd op 01-12-2012 16:38
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:


<!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>

Reageren

Inloggen om te reageren