Ke hoʻohana nei iā CSS e hoʻoholo i kahi kiʻi ma kaʻaoʻao hema o kahi papawaena Pūnaewele
E nānā ma kahi o nā pūnaewele pūnaewele i kēia mau lā aeʻikeʻoe i kahi hui pūnaewele a me nā kiʻi i kūkulu i ka nui o kēlā mauʻaoʻao. He mea maʻalahi ke hoʻonui i nā kikokikona a me nā kiʻi i kahiʻaoʻao . Hoʻonohonohoʻia ka kikokikona e hoʻohana i nā koina HTML kūikawā e like me nā paraka, nā papa inoa, a me nā poʻomanaʻo, i ka hoʻokomoʻia o nā kiʻi me ka hoʻohana element .
ʻO ka hiki ke hana pono i ka hana a me nā kiʻi e like me ka mea nāna e hoʻonohonoho i nā mea hoʻolālā pūnaewele nui! ʻAʻoleʻoe e makemake wale i kāu kikokikona a me nā kiʻi e hōʻike i kekahi ma hope o kekahi,ʻo ia keʻano o ka hoʻonohonohoʻiaʻana o kēia mau pae papaʻa. ʻAʻole, makemakeʻoe i kahi kaʻina o ka holoʻana o ka puke a me nā kiʻi i loko o ka hopena o ka hoʻolālā kiʻi o kāu pūnaewele.
Loaʻa kekahi kiʻi e pili ana i kaʻaoʻao hema o kahiʻaoʻao aʻo ka huapalapala o kēlāʻaoʻao e kahe puni ana he hana maʻamau maʻamau no ka hana i paiʻia a no nā pūnaewele hoʻi. Ma nā pūnaewele pūnaewele, ʻikeʻia kēiaʻano e like me ka lanaʻana i ke kiʻi . Kūponoʻia kēiaʻano me ka waiwai CSS no ka "float". Hiki i kēia 'āina ke holo i ka holoʻokoʻa o ka' ākau hema i konaʻaoʻao'ākau. (A iʻole e pili ana i kahi'ākau pololei i konaʻaoʻao hema.) E nānā i kahi e hiki ai ke hoʻokō i kēiaʻikeʻike.
E hoʻomaka me ka HTML
ʻO ka mea mua e pono aiʻoe e hana, loaʻa iāʻoe kekahi HTML e hana pū me. No ko mākou hiʻohiʻona, e kākau mākou i kahi māhele o ka'ōlelo a hoʻonui i kahi kiʻi ma ka hoʻomaka o ka paukū (ma mua o ka kikokikona, akā ma hope o ka weheʻana
tag). Eia keʻano o kēlā kikowaena HTML:
Ma ka lapaʻau, e hōʻike ana kā mākou pūnaewele me ka kiʻi ma luna o ka kikokikona. Loaʻa kēia no ka mea, he mau kiʻikuhi nā pae i ka HTML. ʻO keʻano kēia i ka weheʻana o ka pūnaewele i nā laina i mua a ma hope o ka hoʻololiʻana o ke kiʻi kiʻi. E hoʻololi mākou i kēia nānā paʻamau ma ka huliʻana i CSS. ʻO ka mea mua, e hōʻaia kāua i ke kūlana o ka papa i ko mākou kiʻi kiʻi . E hanaʻia kēlā papa e like me ke "mākia" a mākou e hoʻohana ai ma kā mākou CSS ma hope aku.
E hoʻomaopopo i kēia papa o ka "hema"ʻaʻole i hana i kāna mea pono'ī! No mākou e hoʻokō i kā mākou kāhua i makemakeʻia, pono mākou e hoʻohana iā CSS ma hope.
Nā CSS Styles
Me ko mākou HTML i kahi, me kā mākou papa inoa o ka "hema", hiki iā mākou ke huli i CSS. E hoʻouka hou aku mākou i ke kaʻina i ko mākou styleheet e lele ai i kēlā kiʻi a hoʻopili hou i kahi pale iki ma hope o ia mea i hikiʻole i ke kikokikona e hoʻopili ponoʻia i ke kiʻi ke kū'ē iā ia. Eia ka CSS hiki iāʻoe ke kākau:
.left [holomua: hema; paliha: 0 20px 20px 0; }Ke lele nei kēiaʻano i kēlā kiʻi i ka hema a hoʻohui i kahi pale iki (me ka hoʻohanaʻana i kekahi CSS shorthand) ma ka'ākau a me lalo o ke kiʻi.
Inā nānāʻoe i kaʻaoʻao e loaʻa nei kēia HTML i loko o kahi polokalamu kele pūnaewele, e pili ana kēia kiʻi i ka hema a e hōʻikeʻia ka kikokikona ma ka'ākau me kahi kūpono o ke spacing ma waena o nā meaʻelua. E hoʻomaopopo i ka nui o ka helu o ka "hema" a mākou i hoʻohana ai. Ua hiki iā mākou ke kapa ia mea no ka meaʻo ka hua'ōlelo "haʻalele"ʻaʻole i hana i kahi mea nona iho. Pono kēia e hoʻokaʻina i ka papa ma ka HTML e hana nei me kahiʻano CSS maoli e kuhikuhi i nā hoʻololiʻike e nānā anaʻoe e hana.
Nā Alaʻokoʻa'ē aʻe e hiki ai ke hoʻokō i kēia mau peni
ʻO kēiaʻano o ka hāʻawiʻana i ke kiʻi kiʻi o kahi papa inoa a ma ka hoʻohanaʻana i kahiʻano CSS nui e holo nei i ka waehana hoʻokahi wale nōʻaoʻao e hiki ai iāʻoe ke hoʻokō i kēia "'ōlohelohe i hoʻoiliʻia". Hiki iāʻoe ke lawe i ke kumukūʻai o ka kiʻi a kāhili iā CSS ma o ke kākauʻana i kahi mea koho maʻamau. Eia kekahi lā, e nānā i kekahi hiʻohiʻona kahi i loko o kēlā me kēia mahele o kahi mahele me kahi kūlana o ka "nui-content".
No ke kiʻiʻana i kēia kiʻi, hiki iāʻoe ke kākau i kēia CSS:
.moku-ihilana img [float: hema; paliha: 0 20px 20px 0; }Ma kēia kūlana, e hoʻokomoʻia ko mākou kiʻi i ka hema, me ka'ōlelo e lana ana e like me ka wā ma mua, akāʻaʻole mākou i pono e hoʻonui i ka nui o ke kumu waiwai i kā mākou wili. Ma ka hanaʻana i kēia palena e hiki ke kōkua i ka hanaʻana i kahi waihona HTML liʻiliʻi, aʻoi aku ka maʻalahi o ka mālamaʻana a hiki hoʻi ke kōkua i ka hoʻonuiʻana i ka hana.
I ka hopena, hiki iāʻoe ke hoʻohui i nāʻano i loko o kāu hōʻailona HTML, e like me kēia:
E kapaʻia kēiaʻano "mau kiʻi inline ". ʻAʻole kūpono no ka meaʻo ia ke hui pono i keʻano o kekahi mea me kona hoʻohālikelike. ʻO nāʻoihana maikaʻi loa o ka pūnaewele e kuhikuhi i ka noho a me keʻano o kahiʻaoʻao e kaʻawale. He kōkua nui kēia i ka wā e pono ai kāuʻaoʻao e hoʻololi i kona papahana a nānā i nā nui a me nā'ōnaehana me kahi pūnaewele pane. Ma ka loaʻaʻana o keʻano o ka palapala i hoʻopaʻaʻia i ka HTML e hoʻoliloʻia ia i mea paʻakikī loa e kākau i nā nīnau o ka pāpāho e hoʻoponopono i ka nānā o kāu pūnaewele e like me ka mea e pono ai no kēlā mau pale likeʻole.
Ka'ōlelo kumu mua na Jennifer Krynin. Hoʻonohoʻia e Jeremy Girard ma 4/3/17.