Avatar billede donslund Nybegynder
06. januar 2011 - 13:31 Der er 7 kommentarer og
1 løsning

Fylde div med andre div'er

Jeg har en <div></div>
Inden i den er der en række mindre div's som alle har samme bredde, men variabel højde. De er alle lidt mindre end halvt så bredde som den ydre div.
Disse mindre div's skal fylde den ydre div op automatisk. De skal fylde denydre div op i 2 kolonner, men de skal lægge sig der hvor der er plads.

Forsøg på visualisering:

http://www.donslund.net/divs.jpg
Avatar billede Slettet bruger
06. januar 2011 - 23:19 #1
Du skal bruge noget css:
div.indre {float:left;}
Avatar billede donslund Nybegynder
06. januar 2011 - 23:25 #2
Det er bare ikke nok, da den næste vil lægge sig under de andre og ikke "flyde" op ved siden af.
Avatar billede Slettet bruger
08. januar 2011 - 13:57 #3
Nej, alle <div>-elementerne med float:left;, vil flyde op ved siden af hinanden - hvis der er plads til dem, vel at mærke.
Se dette:
<html>
<head>

<style type="text/css">
div {border: solid 1px #999;}

div#kontainer {
    width: 250px;
    height: 500px;
}

div#kontainer div {
    width: 100px;
    height: 50px;
    margin: 10px;
    float: left;
}

</style>

</head>

<body>

<div id="kontainer">
   
    <div></div>
   
    <div></div>

    <div></div>
   
    <div></div>
   
    <div></div>

    <div></div>

    <div></div>

</div>

</body>
</html>

Hvis du sætter dette ind, så vil boksene inde i den ydre <div> flyde op ved siden af hinanden to og to.

Det problem, som jeg tror du oplever, er, at din margin er for stor.
Jeg har herover gjort den ydre <div> 250px bred. De indre bokse er 100px brede. Derudover er marginen til hver side på 10 px.
Det betyder jo:
margin-venstre + boksbredde + margin-højre + margin-venstre + boksbredde + marginhøjre
Dvs.
10px + 100px + 10px + 10px + 100px + 10px = 240px
Herudover skal vi jo også tillægge border-bredden.
Avatar billede donslund Nybegynder
08. januar 2011 - 14:33 #4
Som jeg skriver, har min div'er variable højde og det er det der giver problemet.

"div 4" skal fylde hullet op mod "div 1" ud.

<html>
<head>

<style type="text/css">
div {border: solid 1px #999;}

div#kontainer {
    width: 250px;
}

div#kontainer div {
    width: 100px;
    margin: 10px;
    float: left;
}

</style>

</head>

<body>

<div id="kontainer">
 
    <div>
        div 1<br>
        linje 1<br>
        linje 2<br>
        linje 3<br>
        linje 4<br>
        linje 5<br>
        linje 6<br>
        linje 7
    </div>
 
    <div>
        div 2<br>
        linje 1<br>
        linje 2<br>
        linje 3<br>
        linje 4
    </div>
 
    <div>
        div 3<br>
        linje 1<br>
        linje 2<br>
        linje 3<br>
        linje 4<br>
        linje 5<br>
        linje 6
    </div>
 
    <div>
        div 4<br>
        linje 1<br>
        linje 2<br>
        linje 3<br>
        linje 4<br>
        linje 5
    </div>
 
    <div>
        div 5<br>
        linje 1<br>
        linje 2<br>
        linje 3<br>
        linje 4
    </div>
 
    <div>
        div 6<br>
        linje 1<br>
        linje 2<br>
        linje 3<br>
        linje 4
    </div>
 

</div>

</body>
</html>
Avatar billede Slettet bruger
08. januar 2011 - 23:48 #5
Okay, forstået.

Du er nød til at lave to kolonner. Dvs. to <div>, som udgør to kolonner inde i den ydre <div>. Heri skal boksene så placeres jævnt fordelt.
Avatar billede OskarRough Nybegynder
14. januar 2011 - 15:14 #6
Floats vil aldrig "fylde hullet op", men du kan løse det ved f.eks. at bruge flg. script: http://desandro.com/resources/jquery-masonry/
Avatar billede donslund Nybegynder
15. januar 2011 - 09:04 #7
Perfekt. Tænkte nok, at der var nogen der havde tænkt tanken før mig.
Avatar billede donslund Nybegynder
10. marts 2011 - 14:29 #8
Smider du et svar?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester