/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Float top på DIV ?
Fra : Stefan Kristensen


Dato : 17-07-07 23:14

Hej NG.

Jeg har nogle DIV'er der skal vises på en række, så de har naturligvis
fået float: left. Det virker sådan set efter hensigten, men en af
DIV'erne er en del højere end de andre, så resultatet bliver sådan her:

1 2 3
3
4 5 6

Kan jeg sætte noget der ligner float: top på så resultatet bliver sådan her:

1 2 3
4 5 3
6

Mvh
Stefan

 
 
Stefan Kristensen (18-07-2007)
Kommentar
Fra : Stefan Kristensen


Dato : 18-07-07 09:50

> Jeg har nogle DIV'er der skal vises på en række, så de har naturligvis
> fået float: left. Det virker sådan set efter hensigten, men en af
> DIV'erne er en del højere end de andre, så resultatet bliver sådan her:

Jeg har lagt et eksempel på http://jems.dk/test/FloatingDivs.html


Jørgen Farum Jensen (18-07-2007)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 18-07-07 13:22

Stefan Kristensen skrev:
> Hej NG.
>
> Jeg har nogle DIV'er der skal vises på en række, så de har naturligvis
> fået float: left. Det virker sådan set efter hensigten, men en af
> DIV'erne er en del højere end de andre, så resultatet bliver sådan her:
>
> 1 2 3
> 3
> 4 5 6
>
> Kan jeg sætte noget der ligner float: top på så resultatet bliver sådan
> her:
>
> 1 2 3
> 4 5 3
> 6

Der er ikke noget, der hedder float:top. Du har
valget mellem left, right, none og inherit.

Den forståelse, du har brug for, er at et
left-float'et flyder til venstre, så langt til venstre
det kan komme og så højt op det kan komme, begge
inden for forældre-elementet (containing block).
Et left-float'et element der i kildekoden følger
efter et foregående left-float'et element flyder op
så højt det kan komme på højre side af det foregående
element, hvis der er plads til det i containing element.

Du kan betragte sådanne to på hinanden følgende
left-float'ede elementer som en linie tekst, hvis højde
bestemmes af det højeste af de to elementer. Det betyder, at
den næste "linies" placering bestemmes af det højeste
element i den foregående linie.

Nøglen til løsningen af dit problem ligger i begrebet
containing block. I det konkret tilfælde skal
du lave en sådan, der indeholder elementerne 1, 2
4, 5 og 6 og har en bredde der er dobbelt så stor som
de enkelte elementer (husk margin, border og padding
indgår i hvor meget det enkelte element fylder)

Hvis du også left-float'er dette nye element, behøver du
ikke left-float'e element nr 3 - det flyder automatisk
op på højre side af din nye containing block.

Der er en hel del mere at sige om dette emne, også
mere end der er plads til i en usenet posting. Derfor
tillader jeg mig at henvise til kapitel 12 i min neden-
nævnte bog, Webdesign med stylesheets.

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

Stefan Kristensen (18-07-2007)
Kommentar
Fra : Stefan Kristensen


Dato : 18-07-07 13:25

>> Kan jeg sætte noget der ligner float: top på så resultatet bliver
>> sådan her:
>>
> Der er ikke noget, der hedder float:top. Du har
> valget mellem left, right, none og inherit.

Det ved jeg godt. Det var derfor jeg skrev noget der ligner
Men jeg fandt løsningen på mit problem: Jeg laver bare tre kolonner -
Reultatet er det samme som det du beskriver, bare nemmere i mit tilfælde.

Tak for hjælpen.

Mvh
Stefan

Bertel Lund Hansen (18-07-2007)
Kommentar
Fra : Bertel Lund Hansen


Dato : 18-07-07 15:08

Jørgen Farum Jensen skrev:

> Nøglen til løsningen af dit problem ligger i begrebet
> containing block.

Kunne det ikke løses ved at floate 3'eren til højre?

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

Stefan Kristensen (18-07-2007)
Kommentar
Fra : Stefan Kristensen


Dato : 18-07-07 15:21

> Kunne det ikke løses ved at floate 3'eren til højre?
>
Det tænkte jeg også på, men så skulle jeg til at regne margen og padding
den anden vej.
Som sagt, tre kolonner gav det ønskede resultat, jeg kunne bare ikke se
skoven for bar' træ'r

Mvh
Stefan

Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408926
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste