Floate bilder med ulik størrelse

Nano- · 7. juli 2006

Jeg har lyst til å få til et galleri med bilde-thumbs flytende rundt på en slik måte:

Er dette i det hele tatt mulig med css?

Drømmemannen · 8. juli 2006

Du kommer ganske langt med float:left, men du må nok styre litt for å få nøyaktig den plasseringen du har tegnet. Du må antageligvis legge en div rundt de to rutene øverst til venstre og én rundt de to øverst til høyre.

Snekret sammen følgende test basert på tegningen din:

Skjult tekst: (Marker innholdet i feltet for å se teksten):

<html>
<head>
 <style>

   #wrapper {
       width: 450px;
   }

   #wrapper > div { /* Bare første nivå, mulig IE ikke støtter > */
       float: left;
   }

   #wrapper div.img {
       border: 1px solid black;
       margin-top: 10px;
       margin-left: 10px;
   }

 </style>
</head>
<body>

<div id="wrapper">

 <div>
   <div class="img" style="width:150px;height:150px">1</div>
   <div class="img" style="width:150px;height:100px">3</div>
 </div>
 <div>
   <div class="img" style="width:250px;height:100px">2</div>
   <div class="img" style="width:250px;height:150px">4</div>
 </div>

 <div class="img" style="width:200px;height:150px">5</div>
 <div class="img" style="width:200px;height:150px">6</div>

 <div class="img" style="width:100px;height:150px">7</div>
 <div class="img" style="width:300px;height:150px">8</div>

</div>

</body>
</html>

Det man kan få ut av dette er at alle div-ene som har float:left er linjert opp horisontalt (3 grupper av 2 div-er med lik høyde). I den første gruppen har man to div-er hver i hver kolonne, som er linjert opp vertikalt (lik width i hver).

Endret 8. juli 2006 av balletryne

Kim T · 8. juli 2006

Vil ikke anbefale at du gjør det slikt. Det blir fort veldig "rotete". I tillegg ser det mye pener ut med samme størrelsen på thumbs'ene....

Nano- · 8. juli 2006

Ok, ser at dette blir klundrete. Ideen var at bildene (som automatisk hentes ut fra en mappe med php) skulle gjøres om til thumbs og på snedig vis flyte rundt i en thumbcontainerdiv. Den tegninga var bare noe random jeg lagde i paint, og siden jeg umulig kan vite hvilke bilder som ligger i mappa med bilder, funker det dårlig å kode med bredde og høyde for hvert bilde for å få det til å se slik ut

Enig at det sikkert blir litt merkelig, så jeg tror jeg prøver noe enklere. Ser for meg at thumbcontainerdiven inneholder to rader med thumbs, hver thumb er 100px bred, høyden justeres etter proporsjonene på bildet.

Ny paintillustrasjon: :roll:

Logg inn

Floate bilder med ulik størrelse

Anbefalte innlegg

Nano-

Videoannonse

Drømmemannen

Kim T

Nano-

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer