Teksti me shumë kolona. Paraqitja e lëngshme me tre kolona

Bazuar në këto kërkesa, dikur gjeta një mënyrë shumë të mirë për veten time, e modifikova pak dhe i shtova disa parametra për të arritur fleksibilitet gjatë shtrimit të faqeve adaptive. Unë e përdor prej kohësh dhe sot do ta ndaj me ju, ndoshta dikujt do t'i vijë në ndihmë. Dhe kështu le të fillojmë paraqitjen e faqes me tre kolona!

Para së gjithash, ne duhet të zgjidhim strukturën se si do të jetë gjithçka në faqen tonë. Për të filluar, unë do të tregoj vetë kodin, dhe pas kësaj do të analizojmë se çfarë dhe si. Më poshtë është një shembull, gjithashtu provoni të ndryshoni madhësinë e dritares për të parë se si sillet struktura.

Kodi HTML i vetë strukturës:

Kodi tregon se koka dhe fundi i faqes janë të pavarura. Kjo do të thotë, ato nuk janë të mbyllura në asnjë kontejnerë, domethënë, nëse faqja juaj do të ketë një gjerësi të caktuar, atëherë kreu dhe futeri duhet të përqendrohen veçmas në mënyrë që të mos lëvizin. Do të dal përpara, në shembullin tim përmbajtja do të jetë 1170 piksel e gjerë dhe për këtë arsye do të vendos të njëjtën gjerësi në stilet e fundeve dhe të kokës dhe do ta përqendroj atë.

Vetë përmbajtja, së bashku me shiritat anësor, është e mbyllur në një enë të përbashkët që ka një ID - mbështjellës. Përmbajtja e mëtejshme, e cila ndodhet në qendër dhe ka një ID - përmbajtjen, përbëhet nga një kontejner tjetër me id - kryesore. Kjo është një domosdoshmëri për përshtatshmërinë në të ardhmen.

Pas përmbajtjes, ka dy shirita anësor pranë njëri-tjetrit - ai i majtë me ID - ana e majte dhe djathtas me ID - ana e djathtë.

Në mënyrë që gjithçka të shfaqet si duhet, duhet të shtoni stile CSS:

Header( max-width:1170px; margin:0 auto; ) footer(max-width:1170px; margin:10px auto 0; clear:të dyja;) #wrapper(max-width:1170px; margin: 0 auto; pozicion:relativ ; lartësi:100%; ) #main( float:majtas; gjerësia:100%; ) #ana_e_majtë(gjerësia:240px; margjina-majtas:-100%; float:majtas; ) #përmbajtje( margjina:0 440px 0 250px; ) #side_right (float:majtas; gjerësia:430px; margjina-majtas:-430px;)

Siç thashë, bodrumi dhe kapela janë të ndara dhe kanë qendrimin e tyre. Gjerësia kryesore e të gjithë faqes do të jetë 1170 piksele, por sigurisht që mund ta ndryshoni në varësi të nevojave tuaja.

Shiritat anësor kanë gjithashtu një gjerësi fikse, dhe kur madhësia e dritares së shfletuesit zvogëlohet, kolona e mesme - përmbajtja - zvogëlohet. Nëse ndryshoni gjerësinë e shiritave anësor, ndryshoni veçorinë diferencë në përmbajtje për të vendosur indencat e sakta.

Një pikë e rëndësishme është prona afër bodrumit - qartë: të dyja;. Nëse e hiqni, atëherë bodrumi do të hidhet deri në kapelë, dhe ne nuk kemi nevojë për këtë fare. Nëse keni nevojë të bëni dhëmbëzim midis përmbajtjes dhe futbollit, atëherë mund të shtoni një bllok tjetër div midis tyre dhe të vendosni një veçori për të qartë: të dyja;, dhe në bodrum, hiqeni atë dhe vendosni dhëmbëzimin. Për shembull:

//Blloko

Tani le të shtojmë stilet CSS tashmë për shfaqjen e saktë të shiritave anësor dhe përmbajtjes në pajisjet celulare, domethënë do të shtojmë përshtatshmërinë në momentin tonë historik.

Unë kam parametrat për gjerësinë së pari - 950 px, pastaj - 500 px. Nëse ndryshoni gjerësinë e përmbajtjes ose të gjithë kontejnerit, mund t'i ndryshoni vlerat në tuajat, mos harroni dhe llogaritni saktë kështu se nuk ka probleme më vonë.

Në parim, gjithçka është e thjeshtë këtu, dhe vëllimi kryesor është i zënë nga prona e tranzicionit. Kjo është bërë për animacion të qetë kur ndryshoni madhësinë e dritares. Nëse nuk ju nevojitet, atëherë mund ta hiqni plotësisht nga të gjitha ID-të.

Pasi të keni kuptuar thelbin se si funksionon, mund të krijoni lehtësisht faqe reaguese me 3 kolona që kanë dy shirita anësor me përmbajtje në mes.

Kjo është e gjitha, faleminderit për vëmendjen tuaj. 🙂

Teksti me shumë kolona është përdorur prej kohësh në botimet për paraqitjen e gazetave, revistave dhe librave. Është më e rehatshme për një person të lexojë tekst me një gjerësi të caktuar, kolonat thjesht sigurojnë ndarjen e tekstit të madh në kolona të një madhësie të caktuar. Në faqet e internetit, kjo nuk ka gjithmonë kuptim për shkak të lartësisë së kufizuar të dritares së shfletuesit. Lexuesi së pari do të duhet të lëvizë poshtë një kolonë deri në fund, dhe pastaj të kthehet deri në fillim të kolonës tjetër, e cila është mjaft e papërshtatshme. Megjithatë, për disa tekste ka kuptim përdorimi i tekstit me shumë kolona për shkak të përdorimit efikas të hapësirës së lirë përgjatë gjerësisë.

CSS3 ofron katër veti njëherësh për krijimin dhe menaxhimin e kolonave: numërimi i kolonave, boshllëku i kolonës, gjerësia e kolonës dhe rregulli i kolonës. Për qartësi, vlerat e disa vetive tregohen në fig. një.

Oriz. 1. Vetitë e stilit për kolonat

• kolona-count - vendos numrin optimal të kolonave.
• kolona-boshllëk - hapësira ndërmjet kolonave.
• gjerësia e kolonës - gjerësia optimale e kolonave.
• kolonë-rregull - vijë ndarëse ndërmjet kolonave.

Duhet të sqarohet se çfarë është "numri optimal" dhe "gjerësia optimale". Vetia e numërimit të kolonave nuk specifikon numrin e saktë të kolonave, por numrin e dëshiruar. Shfletuesi do të përpiqet ta thyejë tekstin pikërisht në aq kolona, ​​por kur madhësia e dritares zvogëlohet, ai do të zvogëlojë numrin e kolonave për të ruajtur komoditetin e leximit. E njëjta gjë është e vërtetë me gjerësinë. Vetia kolonë-gjerësi specifikon gjerësinë minimale të kolonës dhe shfletuesi mund ta injorojë këtë vlerë nëse madhësia e dritares nuk është mjaft e madhe për të përshtatur gjerësinë e specifikuar të kolonës.

Chrome dhe Safari i kuptojnë këto veçori vetëm me prefiksin -webkit dhe Firefox-in vetëm me parashtesën -moz. Ne kombinojmë vetitë për shfletues të ndryshëm dhe marrim kodin që krijon një tekst me tre kolona (shembulli 1).

Shembull 1. Tre kolona

HTML5 CSS 3 IE 9 IE 10 Cr Op Sa Fx

Rezultati i këtij shembulli në shfletuesin Chrome është paraqitur në Fig. 2. Në vend të tre kolonave, ne shohim dy për shkak të gjerësisë së vogël të dritares së shfletuesit. Nëse rritet madhësia e dritares, numri i kolonave do të rritet në vlerën e specifikuar, dhe nëse gjerësia e dritares zvogëlohet më tej, përkundrazi, numri i kolonave do të reduktohet në një.

Oriz. 2. Teksti me shumë kolona

Për të shkurtuar grupin e vetive të stilit të aplikuar, mund të përdorni kolonat e vetive universale, të cilat caktojnë njëkohësisht gjerësinë e kolonave dhe numrin e tyre (shembulli 2).

Shembulli 2 Përdorimi i kolonave

Kolona ( -kollona-webkit: 200px 3; -moz-kolonat: 200px 3; kolonat: 200px 3; -webkit-column-gap: 30px; -moz-column-gap: 30px; kolona-boshllëk: -webkpx rregulli i kolonës: 1 px solid #cccc; -moz-column-rule: 1px solid #cccc; rregulli i kolonës: 1px solid #cccc; )

Përsëri, disa shfletues kërkojnë që të shtoni prefikset tuaja për të funksionuar. Distanca ndërmjet kolonave dhe parametrave të vijës ndarëse, nëse kërkohet, duhet të vendoset me veti shtesë. Nëse boshllëku i kolonës dhe rregulli i kolonës nuk janë specifikuar, linja midis kolonave nuk shfaqet, por një distancë minimale midis kolonave ruhet gjithsesi.

1. gjerësia e të gjitha qelizave është vendosur si përqindje;

2. një kombinim i përqindjeve dhe pikselëve, kur gjerësia e disa qelizave vendoset në përqindje, dhe të tjerat - në piksel.

NË Në rastin e parë, gjerësia e të gjithë tabelës së pari vendoset si përqindje, dhe më pas gjerësia e qelizave individuale (shembulli 4.22). Për më tepër, në total, gjerësia e qelizave duhet të jetë 100%, pavarësisht nga fakti se madhësia e tabelës mund të jetë e ndryshme. Fakti është se gjerësia e tabelës llogaritet në lidhje me hapësirën e disponueshme. ueb faqe, dhe madhësia e qelizave vendoset në lidhje me të gjithë tabelën në tërësi.

Shembulli 4.22. Përqindja e gjerësisë së kolonës XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6