float
Z oblikovno lastnostjo float
lahko element prestavimo na levi ali desni rob. Pri tako postavljenem elementu se vsebina drugih elementov odmika od njegovih robov. V tem se tudi razlikuje od absolutne postavitve, kjer se vsebina drugih elementov ne odmika.
Vrednost | Pomen |
---|---|
left |
element je ob levem robu |
right |
element je ob desnem robu |
none |
običajna postavitev |
inherit |
vrednost podeduje od nadrejenega elementa |
<p><img src="obala.jpg" width="204" height="182" alt="Deklica na obali"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet orci
quam. Quisque venenatis metus id urna placerat, sed aliquet metus tempor.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum
convallis velit ut velit fermentum aliquam. Donec aliquet erat nec tempor
tincidunt. Praesent ut gravida ante, eget placerat nulla. Integer tincidunt
ipsum eget velit dapibus hendrerit. Nam nec egestas arcu. Suspendisse et
magna aliquet, cursus tellus a, convallis mi. Aenean quis magna at metus
consectetur aliquam. Nulla facilisi.</p>
img {
float: right;
margin: 0 0 1em 1em;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet orci quam. Quisque venenatis metus id urna placerat, sed aliquet metus tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum convallis velit ut velit fermentum aliquam. Donec aliquet erat nec tempor tincidunt. Praesent ut gravida ante, eget placerat nulla. Integer tincidunt ipsum eget velit dapibus hendrerit. Nam nec egestas arcu. Suspendisse et magna aliquet, cursus tellus a, convallis mi. Aenean quis magna at metus consectetur aliquam. Nulla facilisi.
clear
Pri uporabi lebdečih elementov, ki jih imamo postavljene ob levem ali desnem robu strani, lahko tekočo vrstico prestavimo za toliko navzdol, da na levi in/ali desni strani ne bo nobenega lebdečega elementa.
Vrednost | Pomen |
---|---|
none |
dovolimo lebdeče elemente na obeh straneh |
left |
na levi strani ne dovolimo lebdečih elementov |
right |
na desni strani ne dovolimo lebdečih elementov |
both | na obeh straneh ne dovolimo lebdečih elementov |
inherit |
vrednost podeduje od nadrejenega elementa |
<img src="obala.jpg" width="204" height="182" alt="Deklica na obali"/>
<p class="ozadje">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet orci
quam. Quisque venenatis metus id urna placerat, sed aliquet metus tempor.
Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p class="clear">Vestibulum convallis velit ut velit fermentum aliquam. Donec aliquet erat
nec tempor tincidunt. Praesent ut gravida ante, eget placerat nulla. Integer
tincidunt ipsum eget velit dapibus hendrerit. Nam nec egestas arcu. Suspendisse
et magna aliquet, cursus tellus a, convallis mi. Aenean quis magna at metus
consectetur aliquam. Nulla facilisi.</p>
img {
float: right;
}
p.ozadje {
background-color:#FCCC88;
}
p.clear {
clear: both;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet orci quam. Quisque venenatis metus id urna placerat, sed aliquet metus tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Vestibulum convallis velit ut velit fermentum aliquam. Donec aliquet erat nec tempor tincidunt. Praesent ut gravida ante, eget placerat nulla. Integer tincidunt ipsum eget velit dapibus hendrerit. Nam nec egestas arcu. Suspendisse et magna aliquet, cursus tellus a, convallis mi. Aenean quis magna at metus consectetur aliquam. Nulla facilisi.