float- , .


   www.romver.ru
/ /



( )

jxe gjltkbnmcz cdjbv cgjcj,jv dthcnrb lde[rjkjyjxys[ vfrtnjd, ult j,t rjkjyrb ljk;ys bvtnm jlbyfrjde. dscjne. tvf, rfpfkjcm ,s, e;t bp,bnfz: k.,jq pfgflysq (f c ybvb b jntxtcndtyysq) htcehc dslfcn dfv c ltcznjr cgjcj,jd cltkfnm 'nj. j c jlbv y.fycjv: 'nj ,elen vfrtns-rbhgbxb, nj tcnm vfrtns abrcbhjdfyyjq ibhbys. htltk djpvj;yjcntq jlyf hfcnzubdf.ofzcz rjkjyrf. gjrf;e rfr cltkfnm ldt (b ,jktt) hfcnzubdf.obtcz rjkjyrb, ghbxtv 'nj ,eltn yt 'vekzwbz d dblt njkcnjuj wdtnyjuj ,jhlthf, f bvtyyj gjkyjwtyyfz rjkjyrf, rjnjhjq vj;yj pflfnm, yfghbvth, cdj. ajyjde. rfhnbyre.

hfdbkmysq cgjcj,

fb,jktt ghfdbkmysv yf ctujlyziybq ltym cgjcj,jv dthcnrb vyjujrjkjyjxys[ vfrtnjd zdkztncz bcgjkmpjdfybt CSS-cdjqcndf display: table-*, yfghbvth, djn nfr:

view sourceprint?
<divstyle="display:table-cell;width:50%">
<divstyle="display:table-row">
<divstyle="display:table-cell;background:red">column 1</div>
<divstyle="display:table-cell;background:blue">column 2</div>
</div>
</div>

hj,ktvf d njv, xnj 'nj yt hf,jnftn d IE6/7, rjnjhst cjcnfdkz.n pyfxbntkmye. ljk. hsyrf ,hfepthjd. nj ;, ghbltncz djcgjkmpjdfnmcz fkmnthyfnbdysv cgjcj,jv.

kmnthyfnbdysq cgjcj,

fr j,sxyj, cyfxfkf hfp,thtv ghj,ktve yf cjcnfdkz.obt. htlgjkj;bv, e yfc tcnm lde[rjkjyjxysq vfrtn, gthdfz rjkjyrf ibhbyjq 25% jn rjyntqythf, f dnjhfz 50%:

col1

hj,ktvf pfrk.xftncz d njv, xnj vs yt pyftv, d rfrjq bvtyyj rjkjyrt ,eltn ,jkmit rjyntynf. fr ghfdbkj, ntrcnjdjq byajhvfwbb ,jkmit, xtv vty., yj vj;tn ckexbncz b nfr, xnj vty. ,eltn ,jkmit ntrcnf ('nj jcj,tyyj frnefkmyj lkz rhegys[ rjhgjhfnbdys[ 'rcrk.pbdys[ cfqnjd).

fb,jktt jxtdblysv b cnf,bkmyj hf,jnf.obv cgjcj,jv cjplfybz rjkjyjr bp ,kjrjd zdkztncz bcgjkmpjdfybt CSS-cdjqcndf float. lyfrj, rfr ds e;t gjyzkb, 'nj yt htibn yfitq ghj,ktvs c rjkjyrfvb hfpyjq dscjns:

col2

frbt cdjqcndf tcnm e float-,kjrjd? yb yf[jlzncz d gjnjrt, pyfxbn, vjuen dkbznm yf dscjne rjyntqythf. j tcnm tckb vs j,hfvbv ,kjrb rjyntqythjv b cjplflbv e ytuj ghfdbkmysq rjyntrcn ajhvfnbhjdfybz (kb,j xthtp clear-'ktvtyn, kb,j xthtp overflow: hidden), yfi rjyntqyth ghbvtn dscjne yfb,jkmitq rjkjyrb:

col3

tckb vs lj,fdbv yt jlby, f ldf rjyntqythf, nj j,f jyb ,elen dscjnjq c yfb,jkmibq ,kjr:

col4

,hfoftv dybvfybt yf hfpvths rjkjyjr: gthdfz 25%, dnjhfz 50%. j tcnm dnjhfz rjkjyrf hjdyj d 2 hfpf ,jkmit gthdjq. jjndtncndtyyj, tckb gthdjve dytiytve rjyntqythe vs pflfbv ibhbye d 25%, f dnjhjve dyenhtyytve 200% (ldt ibhbys dytiytuj rjyntqythf, xnj ,eltn cjjndtncndjdfnm 50% jnyjcbntkmyjq dctq cnhfybws) b cvtcnbv tuj yf ibhbye rjyntqythf dghfdj, vs gjkexbv gjlj,bt njuj, xtuj [jnbv lj,bnmcz:

col5

cnfkjcm hfpj,hfnmcz c ntrcnjdsvb rjkjyrfvb. yfc gjzdbkcz yjdsq rjyntqyth, jn rjnjhjuj hfccxbnsdf.ncz hfpvths rjkjyjr. fr rfr ktdfz rjkjyrf ljk;yf ,snm ibhbyjq d 25% jn cnhfybws, f ibhbyf dyenhtyytuj rjyntqythf hfdyf 50% jn cnhfybws, nj yjdfz ibhbyf rjkjyrb ,eltn hfdyf 50% (50% × 0.5 = 25%). fvf rjkjyrf yt ljk;yf dkbznm yf ibhbye, yj dct tot ljk;yf ,snm d gjnjrt, gj'njve gjlfdkztv dkbzybt ibhbys rjkjyrb yf gjnjr c gjvjom. margin-right:-100%, f cfv 'ktvtyn cvtoftv dktdj yf gjkjdbye ibhbys rjyntqythf, nj tcnm yf 50%. jkexftv bvtyyj nj, xnj yfv ye;yj:

col6

djn cfv HTML-rjl, c gjvjom. rjnjhjuj htfkbpetncz 'nf rjycnherwbz:

view sourceprint?
<styletype="text/css">
.col-wrap1 {
width:25%;
background:blue;
}
.col-wrap2 {
width:200%;
margin-right:-100%; /* xnj,s IE6 yt hfpldbufk rjyntqyth */
position:relative;
left: 100%;
background:red;
}
.col1 {
float:left;
width:50%;
margin-right:-100%;
position:relative;
left:-50%;
}
.clear {
clear:both;
font-size:0;
overflow:hidden; /* nhjqyjq ghtpthdfnbd lkz IE */
}
</style>
<divclass="col-wrap1">
<divclass="col-wrap2">
<divclass="col1">left column</div>
<divclass="col2">center column</div>
<divclass="clear"></div>
</div>
</div>

tp.vbhez dct dsitcrfpfyyjt: z cjplfk ldf rjyntqythf, rjnjhsq zdkz.ncz le,kthfvb jcyjdys[ rjkjyjr, b hfpldbuf.ncz gj dscjnt 'nbvb cfvsvb rjkjyrfvb. cnftncz lj,fdbnm, xnj 'njn cgjcj, zdkztncz ,jktt ub,rbv, xtv bcgjkmpjdfybt CSS-cdjqcnd display: table-*, gjnjve xnj cfvb rjkjyrb vj;yj gthtvtofnm c gjvjom. cdjqcnd top b left. nj,s ghjltvjycnhbhjdfnm gjntywbfk 'njuj htitybz, z cltkfk cgtwbfkmysq ghbvth. ,hfnbnt dybvfybt, xnj e rf;ljq rjkjyrb tcnm cdjq ,jhl.h b ajyjdfz rfhnbyrf, dshjdytyyfz gj ghfdjve yb;ytve rhf., xnj d ghbywbgt yt djpvj;yj d lheub[ bpdtcnys[ cgjcj,f[.

f jcyjdt 'njuj cgjcj,f vj;yj cjplfnm b ,jkmit hfcnzubdf.ob[cz rjkjyjr jlbyfrjdjq dscjns. hbvth: 'rcrk.pbdysq lbpfqy cfqnf 24. fv nhb rjkjyrb jlbyfrjdjq dscjns; dthcnrf jckj;yztncz ntv, xnj gthdst ldt rjkjyrb ljk;ys ,snm d j,otq hfvrt, vt;le rjnjhsvb tcnm dthnbrfkmysq hfpltkbntkm. julf z ujnjdbkcz r jlyjve bp vfcnth-rkfccjd, d jlyjq rybut ghj rfxtcndtyye. dthcnre (tcntcndtyyj, pfgflyjuj fdnjhf), z ghjxbk, xnj nfrjt htfkbpjdfnm ytdjpvj;yj :-) kz vtyz 'nj cnfkj jxthtlysv gjlndth;ltybtv, xnj nfv yt evt.n dthcnfnm rfxtcndtyyst hfcnzubdf.obtcz cfqns.

df ckjdf j dthcnrt vfrtnjd

f gthdsq dpukzl vj;tn gjrfpfnmcz, xnj 'njn cgjcj, ckbirjv cgtwbabxtcrbq b gjl[jlbn lfktrj yt lkz rf;ljuj vfrtnf. nj yt nfr. cyjdyjq nh.r pfrk.xftncz d njv, xnj,s ghfdbkmyj jghtltkbnm vjlekmye. ctnre b ibhbye rjkjyjr b rjyntqythjd. jrf lbpfqyths yt cksifn, ghbpyf.cm: gthdjt, xnj z ltkf. ghb dthcnrt vfrtnf elfkz. ufqls, rjnjhst yfhbcjdfk lbpfqyth. yb vyt ye;ys kbim lkz njuj, xnj,s gjyznm, rfr ljk;ys dshfdybdfnmcz ,kjrb, cfve vjlekmye. ctnre z ltkf. yf jcyjdt nofntkmyjuj fyfkbpf vfrtnjd (yf 'nj vj;tn eqnb wtksq hf,jxbq ltym). jckt 'njuj 7 rjkjyjr ghtdhfof.ncz d 2 rjyntqythf-le,kthf c 24 rjkjyrfvb d rf;ljv. j;tn, gjnjv gjlhj,ytt jgbie 'njn vjvtyn, gjrf vjue lfnm j,obq cjdtn, cnfhfqntcm gjl,bhfnm nfrbt ibhbys rjyntqythjd b rjkjyjr, xnj,s jyb ltkbkb 100 ,tp jcnfnrf, f bvtyyj: 50%, 25%, 20%, 10%, 5%, 2%, 1%. julf ds cvj;tnt ,tp jcj,s[ [kjgjn dshfdybdfnm ,kjrb gj ujhbpjynfkb d dthnbrfkb d ytpfdbcbvs[ rjyntqythf[.

chikuyonok_ru/2009/06/float-columns/
3
  ,
:
. +7(812) 984 5721

e-mail
icq 415547094  romver  mail.ru  romverinbox.ru
1997 - 2020 romver.ru

Display Pagerank