CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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

Synes godt om

Slettet bruger

06. januar 2011 - 23:19 #1

Du skal bruge noget css:

div.indre {float:left;}

Synes godt om

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.

Synes godt om

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.

Synes godt om

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>

Synes godt om

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.

Synes godt om

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/

Synes godt om

donslund Nybegynder

15. januar 2011 - 09:04 #7

Perfekt. Tænkte nok, at der var nogen der havde tænkt tanken før mig.

Synes godt om

donslund Nybegynder

10. marts 2011 - 14:29 #8

Smider du et svar?

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS