Praneškite apie mus:


CSS plaukiojantys elementai - float

0

Float parametras nurodo elementų plaukiojimą apgal kairę arba pagal dešinę pusę. Plaukiojimą nutraukia parametras clear. Plaukioti gali tik elementai, kurių poistion parametro reikšmė yra static arba relative. Plaukiojantys elementai naudojami dažnai, su jais galime kurti viso puslapio išdėliojimą, paveikslėlių galerijas, įterpti paveikslėlius į teksta ir kt.



Paveikslų galerija su plaukiojančiais elementais

1
2
3
4
5
6
7
8
9
10
11
img {
width:50px;
height:50px;
position:relative;
background-color: #32c3ef;
margin: 10px;
float:left;
}
h2 {
clear:left;
}

pabandyk_pats

 

Plaukiojantis paveiksliukas tekste

Dažnai kartu su tekstu yra pateikiami ir paveikslėliai, float parametras čia yra iš ties patogus.

1
2
3
img {
float:right;
}

 

pabandyk_pats

 

Puslapio išdėliojimas su plaukiojančiais elementais

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#container {
width:700px;
position:absolute;
background-color:#CFC;
border:1px solid #900;
float:none;
}
 
.float {
float:left;
text-align:left;
}
 
#k_meniu {
width: 150px;
height:150px;
background-color:#CCC;
}
 
#straipsnis {
width: 400px;
height:350px;
background-color:#0C6;
}
 
#d_meniu {
width: 150px;
height:150px;
background-color:#FC9;
}

pabandyk_pats


Perskaityta: 3066 kartų

Lukas
Autorius: Lukas
El. paštas.: Šis el. pašto adresas yra apsaugotas nuo spam botų. Jum reikalingas įjungtas Javasctipt kad jį matytumėte
Manualai.lt tinklo autorius ir administratorius. VDU Energetikos Fizikos ir Verslo Informatikos studentas. LinkedIn
Raktažodžiai
css    pazengusiems    float    plaukiojantys   
Patinka straipsnis?
Komentarai

Komentarų nėra. Norėdami komentuoti turite prisijungti