Blocksatz für DIVs in einem DIV

[ZorroZ]

Hey zusammen,
ich arbeite derzeit an einem Fotogaleriesystem und beschäftige mich im moment mit dem ersten Template. Ich möchte gerne ein Resultat haben, wie ihr es in der angehängten Datei betrachten könnt. Mein Problem ist es nun, dass ich keine Idee habe, wie ich mehrere DIVs nebeneinander Blocksatz-artig anzuordnen. Mit float ist es nur möglich die beiden äussersten DIVs zu positionieren. Ich möchte aber, dass die dazwischen liegenden DIVs (es sind 3 in der Zahl) schön gleichmässig verteilt werden.

Habt ihr mir einen Vorschlag?

Gruss,
ZorroZ

 

[Maik]

Hi,

du könntest mit einem horizontal ausgerichteten Listenelement arbeiten:

* {
margin:0;
padding:0;
}

ul#gallery {
list-style:none;
}

ul#gallery li {
float:left;
margin:0 20px;
}

ul#gallery li#first { margin-left:0; }
ul#gallery li#last { margin-right:0; }

ul#gallery li div {
background:#ddd;
width:100px;
height:100px;
}

<ul id="gallery">
    <li id="first"><div>box 1</div></li>
    <li><div>box 2</div></li>
    <li><div>box 3</div></li>
    <li><div>box 4</div></li>
    <li id="last"><div>box 5</div></li>
</ul>