. Būvējot ēku, tas ir līdzīgs ķieģeļiem. Lai gan tas veido vietnes pamatu un dizainu, tas tomēr nav vienīgais. Tāpat kā durvis, logi, ventilācija, balkoni un tamlīdzīgi, izkārtojumam tiek izmantoti citi HTML elementi. Tās ir saites, veidlapas, attēli, saraksti un tabulas.
ļāva mums padarīt kodu kompaktāku un skaidrāku. Pāreja uz bloku izkārtojumu ļāva atbrīvot HTML no nevajadzīgām lietām, proti, stiliem. Ļāva pilnībā noņemt pārslogoto un grūti orientējamo tabulas izkārtojumu.
Aktīvi izmanto CSS bloku izkārtojumu. Izmantojot pieejamos rīkus, varat izveidot jebkuru lapas izkārtojumu ar pikseļu precizitāti. Šo izkārtojumu sauc par perfektu pikseļu. Tas nozīmē perfektu vietnes un izkārtojuma atbilstību. Augšējā fotoattēlā redzams, ka ar bloku izkārtojumu ne viss ir tik vienkārši. Sākumā bez galdiem vienkārši nebija iespējams iztikt. Tie tika izmantoti, lai izveidotu lapu galveno izkārtojumu, un atsevišķiem elementiem tika izmantoti bloki. Tā tas bija līdz brīdim, kad viņi iemācījās iestatīt bloku augstumu.
Priekšrocības
Bloķēt vietnes izkārtojumam ir šādas priekšrocības:
Tālāka attīstība
Pašlaik bloka div izkārtojums ir novecojis un tiek izmantots tikai ierobežoti, tikai kā īpašs gadījums noteiktām situācijām. Tas tika aizstāts ar pozicionēšanu un plūsmu izkārtojumā. Viņiem bija daudz trūkumu, bet kopumā tie atļāva vairāk nekā bloku izkārtojumu.
Tālāk sekoja būvniecība, izmantojot inline-block elementus. Tas ievērojami atviegloja programmētāju darbu. Šī metode izmanto abu veidu bloku priekšrocības un ļauj izveidot atsaucīgāku un adaptīvāku dizainu. Ir vērts atzīmēt, ka visas šīs metodes vienā vai otrā veidā sastāvēja no div elementa, kas tai deva nosaukumu “brīnišķīgs izkārtojums”.
Pašlaik lapas izveidei tiek izmantots Flex-box un bootstrap. Tie ievērojami samazina kodu un ļauj ātrāk un vienkāršāk izveidot augstas kvalitātes atsaucīgu dizainu. Tie ļauj pārvietot blokus, nesalaužot visu lapu.
Progresa priekšgalā ir jauna tehnoloģija - Grids. Tas ļauj ļoti ātri un vienkārši izveidot jebkuras sarežģītības dizainu. Un bloki, plūsma, pozicionēšana, kā tas notika ar tabulām vienā reizē, tiek izmantoti tikai paredzētajam mērķim.
Div izkārtojums ir pašreizējais vietņu izveides modelis.
Internetā pastāvīgi parādās jaunas vietnes - ziņu portāli, blogi un personīgās lapas. Gandrīz katrs no tiem ir izveidots uz bloku modeļa bāzes, kura pamatā ir DIV bloki. Šodien mēs sapratīsim šo tehnoloģiju, apsvērsim galvenās div izkārtojuma nianses.
HTML dokumentu straume
Ja atceramies, ka HTML valoda ļauj strukturēt hiperteksta informāciju, kļūst skaidrs, ka jebkura vietne savā pamatā ir bloku kopums: attēli, teksts, saites utt. Mēs šobrīd nerunājam īpaši par DIV, taču tās ir cieši saistītas tēmas.
Tātad mums ir noteikta datu plūsma, no kuras tiek apkopota HTML lapa. Šobrīd ir divu veidu strukturālie elementi: bloks un inline. Bloku bloki parastajā HTML straumē atrodas viens pēc otra vertikālā secībā. Tajā pašā laikā pēc noklusējuma bloka platums aizņem visu pieejamo vietu attiecībā pret lapu vai vecākelementu. Savukārt inline elementi ir sakārtoti viens pēc otra horizontālā secībā.
Galvenie šo divu kategoriju pārstāvji ir div un span tagi.
Attiecīgi, ja mēs runājam par parastu HTML plūsmu, visi div bloki atradīsies viens zem otra, un laidums būs vienā rindā.
Kā jūs saprotat, jūs nevarēsit izveidot normālu marķējumu vietnei, izmantojot iekļautos elementus. Tāpēc pirms vairākiem gadiem, lai aizstātu tabulas izkārtojumu, viņi nolēma izmantot izkārtojumu, kas balstīts uz DIV blokiem.
DIV mājas lapas izkārtojums
Tātad vietnes marķēšanai sāka izmantot DIV blokus. Izmantojot tos, bija iespējams uzzīmēt galveno izkārtojumu un izveidot papildu blokus visiem nepieciešamajiem satura veidiem.
Apskatīsim šo procesu, izmantojot standarta lapas piemēru, kas ietver galveni, satura bloku, sānjoslu un kājeni.
Šī ir klasiska iespēja. Logotips visbiežāk atrodas vietnes galvenē, bet navigācijas saites - sānu blokā. Galvenais bloks tiek izmantots, lai attēlotu informāciju - rakstus, uzņēmumu aprakstus, foto arhīvus utt. Apakšējā blokā varat ievietot adresi, kontaktus un citu pakalpojumu informāciju.
Kā redzat attēlā, izkārtojuma izkārtojumam mēs izmantojam šādus galvenos blokus:
Galvenais bloks tiek izmantots kā konteiners visam saturam. Header — vietnes galvene. Nav - navigācijas bloks. Saturs – pamatinformācija un saturs. Kājene — vietnes kājene.
Katrs no šiem blokiem ir DIV konteiners. Bet, pamatojoties uz teoriju, blokiem vajadzētu sekot viens otram. Mums ir jāiegūst iepriekš apspriestais izkārtojums, lai blokiem būtu šāda struktūra:
Turklāt tie būtu izvietoti lapā tādā pašā veidā, kā mēs redzam veidnē. Kā mēs to varam panākt? Šim nolūkam mēs izmantosim DIV bloku rekvizītus, kas ļaus tos novietot vēlamajā veidā, attiecībā pret otru un lapu kopumā.
Bet vispirms izveidosim mūsu izkārtojuma HTML pamatu un piešķirsim blokiem nosaukumus, lai mēs varētu strādāt ar stila lapām.
HTML ietvars
Ja mēs izlaidīsim visus pakalpojumu tagus, mūsu vietnes skelets izskatīsies šādi.
Katram blokam mums ir piešķirta klase. Ar tās palīdzību mēs iestatīsim blokam stilus - tas palīdzēs sasniegt vēlamo vietu lapā.
Ir pienācis laiks iepazīties ar stiliem un īpašībām, kas tiek izmantoti vietnes div izkārtojumam.
CSS stili
Ja kāds vēl nezina, CSS stila lapas tiek izmantotas vietņu izstrādē jau ilgu laiku. Ar viņu palīdzību jūs varat mainīt jebkuru lapas elementu. Tas attiecas gan uz bloka vizuālo noformējumu, gan uz tā izvietojumu un mērogu.
Pludiņš
Vispirms apskatīsim īpašumu, kas ļauj novietot DIV lapas labajā vai kreisajā pusē vai attiecībā pret tās vecākkonteineru.
Neliela atkāpšanās. Ikreiz, kad blokam piešķiram stilu, tas mainīs tā īpašības (izmēru, atrašanās vietu) attiecībā pret vecākkonteineru.
Pludinātajam īpašumam ir četras vērtības: nav, pa labi, pa kreisi, mantot.
Mūs interesē vārdu "kreisais" un "labais" nozīme.
Peldošā vērtība norāda, kurā pusē tiks parādīts mūsu bloks. Visi pārējie bloki plūdīs ap to no pretējās puses.
Mūsu gadījumā navigācijas blokam jānorāda vērtība left , bet galvenajam saturam vērtība right . Stila failā tas izskatīsies šādi:
Nav ( peldēt: pa kreisi; ) .content ( peldēt: pa labi; )
Starp citu, jūs varat iestatīt rekvizītu tikai navigācijas blokam. Satura bloks automātiski atradīsies navigācijas labajā pusē. Tas tiks panākts, pateicoties pludiņam, ko iegūst, iestatot pludiņa īpašību.
Piemales CSS: piemale un polsterējums
Tagad sapratīsim divus svarīgus rekvizītus, kas tiek izmantoti div izkārtojumā. Viņi ir atbildīgi par ievilkšanu. Vienkāršākais veids, kā saprast viņu darba būtību, ir ar piemēru.
Iedomāsimies, kas mums jādara, lai mūsu galvenajam blokam MAIN būtu neliela atkāpe no vietnes galvenes. To var panākt, piešķirot piemales rekvizītu div ar galveno klasi. Tas ir atbildīgs par bloka ārējo polsterējumu.
Maržinālajam īpašumam ir šādas vērtības: [vērtība | procenti | auto] (1,4) | mantot.
Tādējādi jūs varat norādīt nobīdi pikseļos, procentos, katrai pusei pēc kārtas.
Ir iespējams iestatīt tikai noteiktu atkāpi, piemēram, augšējā pusē. Tas ir tieši mūsu gadījums. Lūk, kā tas tiks ieviests:
Galvenā (malas augšdaļa: 10 pikseļi; )
Tagad mūsu galvenajam blokam būs 10 pikseļu augšējais polsterējums.
Tagad izstrādāsim bloku ar navigāciju un saturu. Iedomājieties, ka mums jau ir gatava vietne. Visas saites navigācijā atrodas tuvu lapas kreisajai malai. Un teksts satura blokā, gluži pretēji, atrodas cieši blakus labajā pusē. Diezgan nepatīkams dizains. Mums ir jāizveido iekšējais polsterējums.
Par to atbild polsterējuma rekvizīts, kam ir šādas vērtības: [vērtība | procenti] (1, 4) | mantot
Princips šeit ir tāds pats kā maržas rekvizīta gadījumā - jūs varat iestatīt atkāpi katrai pusei atsevišķi.
Nav ( pludiņš: pa kreisi; polsterējums pa kreisi: 15 pikseļi; ) .content ( pludiņš: pa labi; polsterējums pa labi: 20 pikseļi; )
Izmantojot šīs pamata īpašības, jūs varat sasniegt vēlamo DIV bloku izkārtojumu. Rezultātā jūs saņemsiet gatavu mājas lapas izkārtojumu, un atliek tikai aizpildīt to ar nepieciešamo informāciju.
Video rakstam:
Secinājums
Mēs esam apsvēruši tikai pamata īpašības. Patiesībā viņu ir daudz vairāk. Bet jebkurā gadījumā sniegtā informācija vienmēr tiks izmantota div izkārtojumā.
Kāpēc meklēt informāciju citās vietnēs, ja viss ir apkopots šeit?
Autores rakstu sērija, kas veltīta bloku vietnes izkārtojuma pamati. Šī ir pirmā vieta, kur sākt pētīt šo tēmu. mājas lapas izveide. Nodarbības noderēs tiem, kas vēlas apgūt pamatus HTML un CSS ne tikai teorētiski, bet arī praksē.
Pētot tēmu veidosim mājaslapu, parastu mājaslapu, bez īpašiem zvaniņiem un svilpieniem, bet diezgan jauku.
Nodarbībās es vienkārši un skaidri runāju par bloku mājas lapas izkārtojumu un daudz ko citu. Ja vēlaties ātri saprast pamatus vietņu izkārtojumi, tad šī rakstu sērija būs tieši tas, kas jums nepieciešams.
Kas ir bloku izkārtojums?
Kas notika bloķēt vietnes izkārtojumu un ar ko tu to ēd?
Iepriekš tīmekļa vietnes tika veidotas, izmantojot tabulas. Katrs lapas elements, vai tas būtu virsraksts, teksts vai attēls, atradās savā šūnā. Šīs šūnas mudžēja citās, lielākās šūnās, un tās, savukārt, atradās galvenajā šūnā, tas ir, pašā vietnes lapā.
Tabulas izkārtojums tagad ir novecojis, lai gan daudzi tīmekļa pārziņi turpina to izmantot. Tās lielais trūkums ir smagais kods. Galu galā katra mazā šūna ir jāapzīmē ar noteiktiem tagiem.
Bloku izkārtojums- pavisam cita dziesma. Šeit visi lapas elementi atrodas īpašos blokos, ko sauc par div. Savā būtībā tie ir nedaudz līdzīgi tiem pašiem galdiem. Kaste ir kaste arī Āfrikā. Bet bloki ir daudz ērtāki, vienkāršāki un funkcionālāki.
Bloķēt vietnes izkārtojumā tas ir parasts taisnstūrveida laukums, kam ir vairākas īpašības, piemēram: rāmis, piemales un atkāpes. Bloka saturs var būt jebkas – teksta gabals, attēls, saraksts, aizpildāma veidlapa, navigācijas izvēlne utt.
Rāmis- šī ir bloka kontūra, kurai varat iestatīt tādas īpašības kā biezums, krāsa un veids (punktēts, vienkrāsains, punktēts).
Lauki (polsterējums)- atdaliet bloka saturu no tā rāmja, lai teksts, piemēram, netiktu “saspiests” līdz bloka sienām.
Piemales- šī ir tukša vieta starp dažādiem blokiem, kas ļauj novietot divus blokus attiecībā pret otru noteiktā attālumā.
Bloki, tāpat kā tabulas, lapā vienmēr tiek sakārtoti vertikāli. Tas ir, ja lapas kodā ir ierakstīti divi bloki pēc kārtas, tie pārlūkprogrammā tiks parādīti viens zem otra. Ja mums ir nepieciešams horizontāli sakārtot vairākus blokus vienā rindā, tad to īpašībās mēs iestatām tādu parametru kā " plūst apkārt"(peldēt). Bet vairāk par to vēlāk.
Bloķēt vietnes izkārtojumu. Tagi
Tag ir īpaša HTML valodas konstrukcija. Atšķirt atvēršana Un slēgšana tagus. Nejauciet tos ar tēmturiem no sociālajiem tīkliem vai tagiem vietnēs, tās ir dažādas lietas!
Vienkāršākā gadījumā birka ir kā bērnu konstruēšanas komplekta sastāvdaļa, kurai ir savs stingrs mērķis: stienis nozīmē stieni, ritenis nozīmē riteni un neko citu. Piemēram, rindkopas tags:
Rindkopas teksts.
vienmēr tiek apzīmēts ar burtu p un neko citu. Tas ir viņa vārds.
Atzīmes vienmēr ir ievietotas leņķa iekavās. Kā redzat piemērā, ir sākuma un aizvēršanas tags. Noslēguma tagam pirms nosaukuma ir pievienota slīpsvītra — slīpsvītra / .
Ne visiem tagiem ir noslēdzošais pāris. Piemēram, img attēla tagā tā vispār nav. Bet, lai atbilstu mūsdienu standartiem un XHTML specifikācijas prasībām, tie joprojām pievieno atstarpi ar slīpsvītru pirms aizvēršanas leņķa iekavas. Tas izskatās apmēram šādi:
div tags
Div tags ir bloka izkārtojuma pamatā. Tie ir tie paši kubi, no kuriem tiek veidota visa vietne. Šī atzīme ir neitrāla. Atšķirībā no standarta HTML tagiem, kas ir stingri piesaistīti to saturam (p — rindkopām, a — saitēm, img — attēliem), tags div var saturēt jebko un tik daudz šīs lietas, cik vien vēlaties. Uzskatiet to par lielu kasti, kurā visas rotaļlietas tiek izmestas.
Lai definētu, tiek izmantots tags div funkcionālās zonas lapā. Piemēram, piemēram: “galvene”, navigācijas bloks, galvenais satura bloks, “kājene” vai, mūsuprāt, kājene.
Div tagam, tāpat kā jebkuram citam tagam, ir savi atribūti.
Atribūts- birkas aprakstošās īpašības. Tas ir, ko viņš var darīt un kā. Piemēram, ņemsim attēla tagu:
Šajā gadījumā src, platums, augstums, alt ir tagu atribūti. Pēdiņās (un tā ir arī mūsdienu standartu obligāta prasība) ir dotas vērtības atribūti.
Atšifrēt šādu ierakstu nav grūti. Tags norāda, ka šajā lapas vietā jāpievieno attēls risunok.jpg no attēlu mapes. Attēla platums ir 200 pikseļi, augstums ir 50 pikseļi. Un kaudzītei ir pievienots alternatīvs teksts, kas izskaidro attēlā redzamo.
Starp citu, alternatīvais teksts nav kaprīze, bet arī nepieciešama prasība. Ne visiem interneta lietotājiem ir laba redze. Kāds izmanto teksta atpazīšanas un lasīšanas programmu. Un daži cilvēki vienkārši izslēdz attēlu rādīšanu pārlūkprogrammā. Tāpēc zīmējumiem ir alternatīvi paraksti.
Ja nav jēgas tos parakstīt (piemēram, saraksta marķieris vai kāda veida bultiņa), tad alt atribūts tiek atstāts ar tukšu vietu starp pēdiņām.
div tagu atribūti
Div tagam ir tikai divi atribūti:
id - atribūts, kas ļauj piešķirt unikāla vērtība, tas ir, tā, kas tiek izmantota lapā tikai vienu reizi. Piemēram, galvene vai kājene.
Tādā veidā mēs varam tālāk iestatīt dažus iestatījumus stila lapā div tagam ar atribūtu id un galvenes vērtību, kā arī pavisam citus kājenes iestatījumus. Un pārlūkprogramma pareizi atpazīst, ka šis teksta fragments pieder pie “galvenes” un tiks ierakstīts, piemēram, ar lielu un sarkanu fontu, bet šis pieder pie “kājenes” un tiks rakstīts mazā un pelēkā fontā. Un nekādas neskaidrības!
klase ir atribūts, kas ļauj piešķirt vienu un to pašu vērtību vairākiem elementiem. Piemēram, visiem lapas attēliem pievienojiet vienāda biezuma un krāsas rāmi. Tā kā ir vairāki attēli, atribūtu id vairs nevar izmantot, tāpēc mēs izmantojam class .
Pirmo reizi domāju, ka ar to pietiek. Ja kaut kas nav skaidrs par vietņu bloku izkārtojumu, jautājiet komentāros.
Turpinājums sekos. Uzturēt kontaktus!
Izkārtojums ar div blokiem jau sen ir kļuvis par standartu, un tam ir vairākas priekšrocības salīdzinājumā ar tabulas izkārtojumu. Tomēr patiesībā iesācēju izstrādātāji ir neizpratnē par šo pašu bloku uzvedību.
Apskatīsim galvenos bloku izkārtojuma punktus. Tagad neņemsim vērā html5 standartu, bet vienkārši apskatīsim izkārtojuma pamatus ar div blokiem, ko izmanto, veidojot izkārtojumu vai kādu atsevišķu lapas komponentu.
Kas tiek uzskatīts par bloka elementu?
Šāda elementa laukums lapā tiek attēlots ar taisnstūri; pēc noklusējuma tas aizņem visu pieejamo platumu un sākas ar jaunu rindiņu.
Visbiežāk bloku izkārtojumā izmantotais elements ir universālais elements
.
Tātad, no vienkārša līdz sarežģītam. Apskatīsim, kā pēc noklusējuma tiek parādīti divi elementi, stiliem neietekmējot to pozīciju. Skaidrības labad mēs elementiem pievienosim stilus, izmantojot stila atribūtu.
1. bloks
2. bloks
3. bloks
Katram blokam pievienosim platuma vērtību:
1. bloks
2. bloks
3. bloks
Redzams, ka katrs bloks, pēc specifikācijas, atrodas uz jaunas līnijas. Tā ir viņu parastā uzvedība.
Tagad rodas jautājums, kā pozicionēt div bloki vienā rindā, viens pēc otra?
Šim nolūkam ir īpašums, kas nosaka, kurā pusē bloks būs spiests izlīdzināt. Tajā pašā laikā no otras malas tas var plūst ap citiem elementiem.
Pludiņa īpašumam ir šādas nozīmes:
- pa kreisi - bloks ir izlīdzināts ar kreiso malu, plūst pa labi
- pa labi - bloks ir izlīdzināts ar labo malu, plūst pa kreisi
- nav - nav norādīts iesaiņojums, bloks darbojas pēc noklusējuma, tāpat kā iepriekšējos piemēros.
Pievienosim saviem blokiem float:left, lai bloki būtu izlīdzināti pa kreisi:
1. bloks
2. bloks
3. bloks
Rezultātā bloki sarindojās vienā rindā. Labi, pieņemsim, ka vēlējāmies apakšā pievienot vēl vienu div, un mēs to darīsim, nenorādot peldēšanas rekvizītu:
1. bloks. Lorem ipsum dolor sit amet, consectetur adipisicing elit
2. bloks. Lorem ipsum dolor sit amet, consectetur adipisicing elit
3. bloks. Lorem ipsum dolor sit amet, consectetur adipisicing elit
4. vienība. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1. bloks. Lorem ipsum dolor sit amet, consectetur adipisicing elit
2. bloks. Lorem ipsum dolor sit amet, consectetur adipisicing elit
3. bloks. Lorem ipsum dolor sit amet, consectetur adipisicing elit
4. vienība. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Kāpēc tas notika? Īsāk sakot, tas notiek tāpēc, ka peldošie elementi izkrīt no dokumenta plūsmas. Tomēr šī ir atsevišķa raksta tēma. Šeit mēs iepazīsimies ar jauno īpašumu, kas kontrolē peldošo elementu uzvedību:
- pa kreisi - atspējo ietīšanu kreisajā pusē, visi elementi tiks parādīti jaunā rindā (zem elementa)
- tiesības - neļauj elementam ietīties labajā pusē
- abas - aizliedz elementa aptīšanu no abām pusēm; ieteicams to izmantot, ja skaidri nepieciešams parādīt elementu jaunā rindā vai nav zināms, kurā pusē ir iespējams aptīt citus elementus
Pievienosim 4. blokam rekvizītu clear:left, kas neļaus šim elementam plūst ap citiem peldošajiem elementiem kreisajā pusē.
1. bloks. Lorem ipsum dolor sit amet, consectetur adipisicing elit
2. bloks. Lorem ipsum dolor sit amet, consectetur adipisicing elit
3. bloks. Lorem ipsum dolor sit amet, consectetur adipisicing elit
4. vienība. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1. bloks. Lorem ipsum dolor sit amet, consectetur adipisicing elit
2. bloks. Lorem ipsum dolor sit amet, consectetur adipisicing elit
3. bloks. Lorem ipsum dolor sit amet, consectetur adipisicing elit
4. vienība. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
4. bloks tiek novietots jaunā rindā, kā mums nepieciešams.
Šajā gadījumā mēs zinām, kā atrodas citi bloki, tāpēc piemērā mēs nekavējoties norādījām skaidri: pa kreisi. Ir situācijas, kad precīzi nezinām, kurā pusē peldošais bloks sastapsies, tāpēc šādos gadījumos ir vērts norādīt skaidru:abi, kas atceļ plūsmu abās pusēs. Tagad mēs esam izdomājuši, kā div blokus novietot horizontāli vienā rindā.
Ņemiet vērā, ka pludiņa bloki tiek novietoti vienā līnijā, ja to atļauj vecākelementa platums. Ja bloka elementi neietilpst rindā, tie tiks ietīti uz jaunu līniju. Ja tas ir svarīgi, piemēram, izkārtojot izkārtojumus, tas ir jāņem vērā un blokiem ar pludiņu noteikti iestatiet platumu - fiksētu (px) vai gumiju (%, rem utt.). Tālāk aplūkosim šādas situācijas.
Kā ietekmēt blokus, ja vēlamies šos blokus novietot centrā?
Klasiskais risinājums būtu pievienot blokiem vecāku un izmantot piemaļus: 0 auto; īpašums.
Kāpēc mēs iedevām vecākam klase.wrapper? "iesaiņotājs" nozīmē "iesaiņojums". Tā ir sava veida vispārpieņemta prakse, definējot klases nosaukumu, ka elements apņem citus blokus un tādējādi ļauj tos kontrolēt/ietekmēt, mainot pašu vecāku.
Ņemsim uzcenojumu no iepriekšējiem piemēriem un uzlabosim to.
1. bloks. Lorem ipsum dolor sit amet, consectetur adipisicing elit
2. bloks. Lorem ipsum dolor sit amet, consectetur adipisicing elit
3. bloks. Lorem ipsum dolor sit amet, consectetur adipisicing elit
4. vienība. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1. bloks. Lorem ipsum dolor sit amet, consectetur adipisicing elit
2. bloks. Lorem ipsum dolor sit amet, consectetur adipisicing elit
3. bloks. Lorem ipsum dolor sit amet, consectetur adipisicing elit
4. vienība. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Šeit viss šķiet vienkārši.
Un, ja mums nepatīk, ka teksts cieši pielīp vecākbloka malai un mēs vēlamies pievienot laukus, neveicot izmaiņas marķējumā, tikai izmantojot css. Pievienosim elementiem pildījuma rekvizītu:
Bloks 1. Lorem
2. bloks. Lorem ipsum
3. bloks. Lorem ipsum
4. bloks. Lorema
Un mēs redzam, ka mūsu izkārtojums ir izjaukts! 3. bloks ir kaut kur pazudis. Kāpēc tas notika? Atbilde ir vienkārša. Pievienojot elementiem laukus, mēs palielinājām to platumu. Tagad vērtības ir:
1. bloks: 10 + 200 + 10 = 220 pikseļi
2. bloks: 10 + 150 + 10 = 170 pikseļi
3. bloks: 10 + 100 + 10 = 120 pikseļi
4. bloks: 10 + 450 + 10 = 470 pikseļi
220 + 170 + 120 = 510 pikseļi
Trīs bloku kopējais platums ir 510, tie neietilpst pamatelementa (450) platumā un tāpēc tiek pārnesti uz jaunu rindu.
Kā to salabot? Varat veikt tālāk norādītās darbības.
- Atiestatiet katra bloka platuma vērtības, ņemot vērā piemales. Samazinot bloku izmērus. Viss atkal glīti satilps vienā rindā. Vai piekrītat, ka tas ir neērti? Katru reizi, kad es iesaistos izkārtojumā un kaut ko rediģēju.
- Izmantojiet lodziņa izmēra rekvizītu: border-box. Lai aprēķins tiktu ņemts no bloka kopējā platuma. Iesaku noskaidrot, kāds ir css bloka modelis.
Izmantojot otro iespēju, tas izrādās šādi:
Bloks 1. Lorem
2. bloks. Lorem ipsum
3. bloks. Lorem ipsum
4. bloks. Lorema
Bloks 1. Lorem
2. bloks. Lorem ipsum
3. bloks. Lorem ipsum
4. bloks. Lorema
Tagad apkoposim visu saņemto informāciju un mēģināsim izveidot vienkāršu standarta trīs kolonnu izkārtojumu ar elastīgu izkārtojumu, kas izstiepsies maksimāli līdz 900 pikseļiem, pēc kura viss izkārtojums tiks novietots centrā.
Izveidojiet izkārtojuma marķējumu:
Dokuments
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit rem fugit itaque, est impedit aperiam a autem repellat vitae porro ex expedita, cumque nulla, velit. Soluta velit eos, quia. Fugiat voluptates nisi aliquid eum sapiente sunt nobis, adipisci takennda earum!
Mēs rakstām stilus:
Pamatteksts ( max-width: 900px; /* ierobežo maksimālo platumu */ margin: 0 auto; ) /* visiem blokiem pamattekstā, mainiet bloka platuma aprēķina algoritmu un pievienojiet 10 pikseļu piemales visiem blokiem */ body div ( - webkit-box-sizing : border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; ) .header ( fons: #CCA69E; polsterējums: 10px; ) .left- sānjosla (platums: 20 %; fons: #8ED9B6; pludiņš: pa kreisi; ) .content ( pludiņš: pa kreisi; platums: 60%; ) .labā sānjosla (platums: 20%; fons: #FF9282; peldēšana: pa kreisi; ) .footer ( fons: #000; skaidrs: abi; /* atspējot ietīšanu abās pusēs, bloks tiek parādīts jaunā rindā */ krāsa: #ccc; )
Ja kaut kas nav skaidrs, jautājiet komentāros.
Varētu būt noderīgi izlasīt: