Plaukiojimas yra vienas iš svarbiausių CSS koncepcijų. Be šios principo supratimo, tinklalapiai negali būti sukurti remiantis CSS. Plaukiojant galima labai gražiai paversti pluoštimi, kas tiksliai nurodo esmę. Galiausiai plaukiojimas reiškia, kad elementas susiliečia kairėje arba dešinėje pusėje su kitu elementu. (Įprastai elementas būtų apačioje, po kito elemento).
Pirma pavyzdys turėtų pademonstruoti šį aspektą.
<p><img src="bild.jpg" /> Šiame rinkinyje yra 12 savitų formų, kurias galite naudoti savo skelbimuose, fonuose ir t.t. Formos skirstomos į 18, 21 ir 24 juostelės bei skirtingą spindulių plotį. Šie nustatymai yra puiki pagrindas gražiems efektams jūsų išdėstymuose ir paveikluose.</p>
Čia buvo apibrėžtas paragrafas. Šiame paragrafe yra paveikslėlis ir įprastas tekstas.
Pasidžiūrėję rezultatą, matote, kad paveikslėlis yra teksto sraute.
Dabar ateina float savybė.
img { float: left;}
Savybei float galite priskirti reikšmes left ir right, kad elementas būtų paliktas kairėje (float: left) arba dešinėje (float: right) pusėje „plaukti“. Taip pat galite iš karto taikyti float: right prie paveikslėlio.
• Grafika iš normalaus srauto išimama.
• Ji „paskęsta“ p elemente visiškai viršuje.
• Ji rodoma kiek įmanoma dešinėje.
Pilnas sužinojimas apie rezultatus parodo, kad tai dar nesikviečia gražiai. Iš tikrųjų trūksta atstumų tarp paveikslėlio ir teksto, kuris jį supa. Taigi, pakeiskite sintaksę taip:
img {
float: left;
margin-right: 20px;
}
Užbaigti plaukiojimą
<p><img src="bild.jpg" />Šiame rinkinyje yra 12 savitų formų, kurias galite naudoti savo skelbimuose, fonuose ir t.t. Formos skirstomos į 18, 21 ir 24 juostelės bei skirtingą spindulių plotį. Šie nustatymai yra puiki pagrindas gražiems efektams jūsų išdėstymuose ir paveikluose.</p><p>Šiame rinkinyje yra 12 savitų formų, kurias galite naudoti savo skelbimuose, fonuose ir t.t. Formos skirstomos į 18, 21 ir 24 juostelės bei skirtingą spindulių plotį. Šie nustatymai yra puiki pagrindas gražiems efektams jūsų išdėstymuose ir paveikluose.</p>
clear verčia sekantį elementą pradėti tiesiogiai po plaukiojančio elemento, o ne šalia jo. clear savybė turi šias reikšmes:•
left - baigia float: left•
right - baigia float: right•
both - baigia tiek float: right, tiek float: leftPavyzdžio metu priskirsiu antrajam paragrafui clear: left, kad baigtų plaukiojimą.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
img {
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<p style="background-color:#CCFF66;"><img src="bild.jpg" />Šiame rinkinyje yra 12 savitų formų, kurias galite naudoti savo skelbimuose, fonuose ir t.t. Formos skirstomos į 18, 21 ir 24 juostelės bei skirtingą spindulių plotį. Šie nustatymai yra puiki pagrindas gražiems efektams jūsų išdėstymuose ir paveikluose.</p>
<p style="clear:left;">Šiame rinkinyje yra 12 savitų formų, kurias galite naudoti savo skelbimuose, fonuose ir t.t. Formos skirstomos į 18, 21 ir 24 juostelės bei skirtingą spindulių plotį. Šie nustatymai yra puiki pagrindas gražiems efektams jūsų išdėstymuose ir paveikluose.</p>
</body>
</html>
Pateikta sintaksė leidžia faktiškai išvesti antrąjį paragrafą žemiau paveikslėlio.
Daugeliu atvejų, vietoj clear: left arba clear: right, galite tiesiog panaudoti clear: both. Todėl patariama tiesiog sukurti atitinkamą klasę savo stiliaus apraše, kurią galima naudoti, kai reikia.
.clearing {
clear: both;
}
Šią klasę galite naudoti, kai norite baigti elemento stumbyklūs.
<p class="clearing">Turinys ...</p>
Kam naudojami stumbyklai
Žinoma, stumbyklai nenaudojami tik teksto srautui susijungus su paveikslais. Faktiškai tai yra pagrindinė CSS pagrindu veikiančių tinklalapių koncepcija. Dėka stumbyklų, daugiastalpius maketus galima labai paprastai sukurti. Pavyzdžiui, pažiūrėkite į šį pavyzdį:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
#navi {
float:left;
width:12em;
background-color:#99FFFF;
}
#inhalt {
margin-left: 14em;
background-color: #FF3333;
}
</style>
</head>
<body>
<div id="navi">
<ul>
<li>Pradžios puslapis</li>
<li>Kontaktai</li>
<li>Impressum</li>
</ul>
</div>
<div id="inhalt">
Čia yra tinklalapio turinys.
</div>
</body>
</html>
Čia sukuriamas dviejų stalpių maketas. Ypatinga tai, kad stulpeliai yra vienas šalia kito.
Ir būtent šis šalia-kito stovėjimas yra realizuojamas naudojant stumbyklų koncepciją. Išsamūs duomenys apie tinklalapių kūrimą pagal stumbyklas rasite šio ciklo vėlesniuose skyriuose.
