Css paketini çıxarın. CSS: Paketləmə elementləri. Layer layout üfüqi
Şəkil və mətndən ibarət bir blok qoyun və mətn şəklin ətrafında axmamalıdır.
Sol doğrudur, sağ deyil
Əlavə şərt: nə mətnin, nə də şəklin eni ciddi şəkildə müəyyən edilməyib. Şəkil yoxdursa, mətn bütün ayrılmış genişliyi tutur.
Həll
Gəlin üslub yazmağa çalışaq. Sol sütunla hər şey aydındır:
Şəkil ( float: sol; /* sarğı təyin edin */ margin:10px; /* gözəllik üçün girinti */ display:inline; /* IE6 üçün, sol abzas ikiqat olmasın */ )
İndi rəsm solda, mətn isə sağda onun ətrafında gedir. Ancaq daha çox mətn varsa, o, rəsm altında "dalıyacaq" (yuxarıdakı şəklə baxın) və buna ehtiyacımız yoxdur.
Ağla gələn ilk şey mətni “üzən” etməkdir. Amma bu halda eni qeyd etməsəniz, mətn şəklin altına düşəcək!
float:sol/sağ genişlik tələb edəcək - əks halda heç nə işləməyəcək!
Gəlin daha çox düşünək... .description( : XXXpx) yaxşı həll yolu kimi görünə bilər. Həqiqətən, bəzi hallarda bu seçim işləyir. Məsələn, şəkil ölçüsü hələ də müəyyən edilirsə. Deyək ki, bu, rezin xəbər blokudur. Şəkil daha geniş ola bilməz, məsələn, 200px, lakin mətn artıq uzanır və bütün qalan eni tutur.
Ancaq bu seçimin əhəmiyyətli bir çatışmazlığı var. Şəkil ilə blok yoxdursa, girinti hələ də yöndəmsiz bir çuxur olaraq qalacaq. Əlbəttə ki, məqalədə göstərildiyi kimi bacı element seçicisindən istifadə edərək onu silə bilərsiniz, lakin bizim vəziyyətimizdə başqa bir həll var.
Siz sadəcə olaraq əlavə etməklə bükülmənin qarşısını ala bilərsiniz: hidden; mətn sütunu üçün. Bununla biz onun üçün yeni formatlaşdırma kontekstini təyin edəcəyik (bu mövzu tezliklə daha ətraflı işıqlandırılacaq).
Buna səhv reaksiya verəcək yeganə brauzer, əlbəttə ki, IE6-dır. Sütunu xüsusi olaraq bunun üçün təyin etdik, məsələn, "float" (eni təyin etməyə ehtiyac yoxdur).
Beləliklə, problemin həlli belə görünür:
Şəkil ( float: sol; /* float təyin edin */ margin:10px; /* gözəllik üçün girinti */ display:inline; /* IE6 üçün, sol abzas ikiqat olmasın */ ) .description( overflow:hidden ; ) * html .description( float:left; )
Həmişə olduğu kimi döyüş şəraitində istifadə edirik.
Müasir veb dizaynda, əmlak sal demək olar ki, hər addımda istifadə olunur. Ancaq bu yayılmaya baxmayaraq, hər kəs üzən blokların mexanizmini, davranışlarını və istifadəsinin hansı nəticələri ola biləcəyini başa düşmür.
"Float" nədir?
Sal Bu CSS yerləşdirmə xüsusiyyətidir. Onun mahiyyətini və mənşəyini anlamaq üçün çap dizaynına diqqət yetirmək lazımdır. Çap tərtibatlarında şəkil elə yerləşdirilə bilər ki, mətn onun ətrafında axsın. Bu adətən "adlanır mətnin sarılması".
Səhifə tərtibatında mətndən ibarət blok istifadə üçün təyin oluna bilər mətnin şəklin ətrafına sarılması və ya bağlamaya məhəl qoymayın. Mətnin bükülməsinə məhəl qoymamaq sözlərin təsvirin üzərində yoxmuş kimi axmasına imkan verəcək. Bu, şəklin səhifədəki axının bir hissəsi olub-olmaması fərqini yaradır. Veb dizaynında hər şey çox oxşardır.
Veb dizaynında CSS xüsusiyyətinə malik element ona tətbiq edilir salçap tərtibatında ətrafına bükülmüş mətn olan bir şəkil kimi davranacaq. Üzən elementlər veb səhifənin axınının bir hissəsi olaraq qalır. Bu, axından çıxarılan mütləq yerləşdirilmiş elementlərdən tamamilə fərqlidir, sanki çap edilmiş tərtibatda mətn blokuna təsvirin bükülməsinə məhəl qoymamaq deyilirdi. Mütləq yerləşdirilmiş elementlər digər elementlərin yerləşdirilməsinə, digər elementlər isə onların yerləşdirilməsinə təsir göstərmir.
Əmlakın təyin edilməsi sal CSS istifadə edən elementlər üçün belə görünür:
#yan panel (float: sağ; )
Mülk üçün dörd etibarlı dəyər var sal - sol, sağ, heç biri, miras almaq. İlk iki sol Və sağ yerin istiqamətini göstərin - müvafiq olaraq sol və sağ. Heç biri- default dəyər, elementin üzən olmadığını göstərir və miras almaq bir elementə əmlakın dəyərini miras almağı əmr etmək sal ana elementdən.
Float nə üçün istifadə olunur?
Mətnin şəklin ətrafına sarılmasının sadə nümunəsindən başqa, sal web layouts yaratmaq üçün istifadə edilə bilər.
Sal, kiçik layout elementləri üçün də istifadə etmək rahatdır. Məsələn, veb səhifənin bu kiçik fraqmentini götürək. Mülkiyyəti təyin etsək sal Kiçik bir avatar şəkli üçün, şəkil ölçüsü dəyişdikdə, sarğı yeni şəkil ölçülərinə uyğun olaraq dəyişəcək:
Eyni tərtibat konteynerin nisbi yerləşdirilməsi və onun içindəki avatarın və mətnin mütləq yerləşdirilməsi ilə həyata keçirilə bilər. Ancaq bu sxemə uyğun olaraq həyata keçirilən bir tərtibatda şəkil ölçüsünün dəyişdirilməsi mətn blokuna təsir etməyəcək, çünki mütləq yerləşdirmə elementləri digər elementlərə və digər elementlər onlara təsir göstərmir.
Sarma sıfırlaması
Təmizəmlakla əlaqəli əmlak sal. Əmlak dəsti olan element aydın xassə dəsti olan element ətrafında yuxarıya doğru hərəkət etməyəcək sal, lakin axına məhəl qoymadan aşağıya doğru hərəkət edəcək. Və yenə də hər şeyi daha çox uzatmadan izah edəcək bir illüstrasiya.
Yuxarıdakı nümunədə yan panel əsas məzmun blokunun sağında üzürdü. "Alt-bilgi" əsas məzmunla blokun ətrafında axan yan panelin altındakı boş yerə keçdi. Bu problemi həll etmək üçün hər iki sütunun ətrafındakı axını "təmizləmək" üçün altbilginin clear:both xüsusiyyəti üçün dəyər təyin etməlisiniz.
#footer ( aydın: hər ikisi; ) 
Əmlak aydın dörd mənası var. Hər ikisi hər iki istiqamətdə axını azaltmaq üçün istifadə olunur. Sol Və Sağ bir istiqaməti sıfırlamaq üçün istifadə olunur - müvafiq olaraq sola və ya sağa. Heç biri- cari dəyər. Vərəsəlik beşinci dəyər ola bilər, lakin təəccüblü şəkildə dəstəklənmir internet Explorer. Yalnız sol və ya sağ axını sıfırlamaq olduqca nadirdir, lakin praktik faydaları var.
Böyük çökmə
İşlə bağlı bir şey salÇaşqın olan bu əmlakın ana elementlərə təsiridir. Əgər ana elementdə floatdan başqa heç bir element yoxdursa, onun hündürlüyü sözün əsl mənasında çökür. Bu, heç də həmişə nəzərə çarpmır, xüsusən də əsas elementin görkəmli fonu yoxdursa, lakin bunu yadda saxlamaq vacibdir.
Ancaq belə bir çöküşün alternativi daha da pisdir. Aşağıdakı ssenarini nəzərdən keçirin:
Üst blok avtomatik olaraq üzən elementi yerləşdirmək üçün genişlənirsə, biz paraqraflar arasında mətn axınında boşluqla nəticələnəcəyik, onu düzəltmək üçün heç bir yol yoxdur. Əgər belə olsaydı, onda tərtibatçılar üzən blokların bu davranışından indi çökmə ilə bağlı şikayət etdiklərindən daha tez-tez şikayət edərdilər.
Qəribə layout davranışının və cross-brauzer problemlərinin qarşısını almaq üçün çökmə həmişə yadda saxlanmalıdır. istifadə edərək bu problemi həll edə bilərik aydın konteynerdəki üzən elementdən sonra, lakin konteyner bağlanmazdan əvvəl.
Qablaşdırmanın ləğvi üsulları
Əgər növbəti elementin harada olacağını bildiyiniz vəziyyətdəsinizsə, clear:hər ikisindən istifadə edib işinizi davam etdirə bilərsiniz. Bu idealdır, çünki heç bir hack və ya əlavə element tələb etmir. Amma təəssüf ki, adətən hər şey istədiyimiz kimi getmir və bu halda aşağıdakı vasitələrdən istifadə edə bilərsiniz.
Boş blok üsulu.
Bu, sözün əsl mənasında boş blokdur.
. Bəzən bir element tapa bilərsiniz
və ya hər hansı digər təsadüfi element, lakin div ən çox yayılmışdır, çünki onun brauzerlərdə standart üslubu yoxdur, xüsusi funksiyası yoxdur və ümumi CSS üslubunda olması ehtimalı azdır. Bu üsul semantik purists tərəfindən rədd edilir, çünki onun mövcudluğunun səhifədə kontekstual mənası yoxdur və o, yalnız görünüş üçün mövcuddur. Təbii ki, ciddi mənada haqlıdırlar, amma o, öz işini görür və heç kimə zərər vermir.
Daşma üsulu.
CSS xassələrinin müəyyənləşdirilməsinə əsaslanır daşqın ana element üçün. Bu xüsusiyyət təyin edilərsə avto və ya gizliəsas element üçün o, üzən elementdən sonra genişlənəcək və sonrakı elementlərin sarılmasını effektiv şəkildə sıfırlayacaq. Bu üsul semantik cəhətdən gözəl ola bilər, çünki əlavə elementlər tələb etmir. Ancaq gördüyünüz kimi yenisini əlavə etdik div qeyri-semantik boş blokdan istifadə etməyə bərabər olan və daha az çevik olan bu metoddan istifadə etmək. Mülkiyyət olduğunu da xatırlamaq lazımdır daşqın sarmağı dayandırmaq üçün nəzərdə tutulmayıb. Təsadüfən məzmunu gizlətməmək və ya arzuolunmaz sürüşdürmə çubuqlarına səbəb olmamaq üçün diqqətli olun.
Asan təmizləmə üsulu.
Qablaşdırmanı silmək üçün CSS psevdoselektorundan (:sonra) istifadə edir. Əmlakdan istifadə etmək əvəzinə daşqınƏsas element üçün onun üçün əlavə sinif təyin edin, məsələn, "clearfix" və aşağıdakı CSS üslubundan istifadə edin:
Clearfix:sonra ( məzmun: "."; görünmə: gizli; ekran: blok; hündürlük: 0; aydın: hər ikisi; )
Bu, görünüşdən gizlədilmiş, əsas elementdən sonra yerləşən və sarğı sıfırlayan kiçik məzmun parçasından istifadə edir. Bu üsul tam deyil, çünki köhnə brauzerləri dəstəkləmək üçün təkmilləşdirilməlidir.
Fərqli vəziyyətlər fərqli blef relyef üsullarını tələb edir. Nümunə olaraq müxtəlif növ bloklardan ibarət bir şəbəkə götürək.
Oxşar blokları daha yaxşı vizual şəkildə birləşdirmək üçün rəng dəyişdikdə yeni sətirə başlamalıyıq. Hər bir rəng qrupunun bir ana elementi varsa, daşqın və ya işığın təmizlənməsi metodundan istifadə edə bilərik. Və ya qruplar arasında boş blok metodundan istifadə edirik. Əvvəllər mövcud olmayan üç ana blok və ya əvvəllər mövcud olmayan üç boş blok. Hansı metodun daha yaxşı olduğuna qərar vermək sizin ixtiyarınızdadır.
Üzən elementlərlə bağlı problemlər
Üzən elementlər kövrəkliyinə görə tez-tez tənqid olunur. Bu kövrəkliyin çoxu IE6 və ondan gəlir float yönümlü səhvlər. Ancaq getdikcə daha çox tərtibatçı IE6 üçün dəstəyi dayandırdıqca, bu barədə düşünməyə bilərsiniz, lakin uyğunluğa əhəmiyyət verənlər üçün qısa bir siyahı təqdim edirik.
Basmaq, üzən blokun içindəki elementin həmin blokdan daha geniş olmasının əlamətidir (bu, adətən şəkillərlə olur). Əksər brauzerlər üzən elementi kənara çıxaracaq, lakin bunun tərtibata heç bir təsiri olmayacaq. IE üzən bloku genişləndirəcək və çox vaxt bu layouta kəskin təsir göstərir. Tipik bir nümunə, əsas məzmun blokundan kənara çıxan və yan çubuğu aşağı itələyən bir şəkildir.
Problemin tez həlli: istifadə daşqın: gizli; artıqlığı kəsmək üçün.
İkiqat kənar xəta- IE6 ilə işləyərkən yadda saxlamaq lazım olan başqa bir şey. Bu səhv, sahənin istiqamətləndirildiyi ilə eyni tərəfdə olması ilə ifadə edilir sal, sahə ikiqatdır. Misal üçün:
Sol sahəni daxil edəcəyik 40px., əvəzinə 20px.
Problemin tez həlli: Üzən blok üçün ekranı təyin edin və element blok səviyyəsində qalacaq, narahat olmayın.
3px qaçış. Bu səhvin mahiyyəti ondan ibarətdir ki, üzən elementin yanında yerləşən mətn, sanki üzən elementin ətrafında yerləşən güc sahəsinin təsiri altında qəribə şəkildə üç piksellə sürüşdürülür. Problemin tez həlli: Təsirə məruz qalan mətnin enini və hündürlüyünü təyin edin.
IE7-də görünür Aşağı kənar xətası, əsas element üzən element olduqda və onun daxilində yerləşdiyi uşaq da üzən elementdir. Uşağın alt kənarı (margin-alt) əcdad elementi tərəfindən nəzərə alınmır. Problemin tez həlli: Uşaq elementdə kənar-alt əvəzinə əsas elementdə padding-bottom istifadə edin.
Məsələn, üç sarğı blokunu və içərisində üç nömrələnmiş bloku ehtiva edəcək HTML kodunu səhifəyə əlavə edək:
İndi onlar üçün ümumi üslubları göstərək:
Container1, .container2, .container3( en: 70%; kənar: 15px avtomatik 0; fon rəngi: #CCFFCC; haşiyə: 2px bərk #ccc; padding:20px; ) .block1, .block2, .block3( padding-top : 35px; mətni align: mərkəz; şrift ölçüsü: 28px; mətn kölgəsi: 1px 1px 1px rgba(0, 0, 0, 0.5); fon rəngi: #CCCCFF; hündürlük: 65px; en: 100px; )
Nəticədə bu şəkli alacaqsınız:
Nömrələnmiş bloklara float xassəsini əlavə edək:
Blok1, .block2, .block3( float: sol; ) 
Birinci yol, əsas blok elementində hər ikisinin dəyəri ilə aydın xüsusiyyətdən istifadə etməkdir.
Bu ümumi seçimdir və mən bundan əvvəllər çox istifadə etmişəm, baxmayaraq ki, fikrimcə, bu, ən yaxşısı deyil. Razılaşın, HTML səhifəsi üçün işarələmə üzərində düşünəndə məntiqə uyğun gəlməyən lazımsız elementlərdən istifadə etmək istəmirsiniz.
İkinci üsul lazımsız HTML kodu əlavə etməyi tələb etmir. Onu istifadə etmək üçün konteynerə yalnız bir sətir yazmalısınız - avtomatik dəyərlə daşmaq. Bu üsuldan istifadə etdikdən sonra yalnız bir çatışmazlıq var: içəridə olan məzmunu qablaşdırma blokunun koridorlarından kənara köçürmək mümkün deyil, bu, konteynerə nisbətən bir şeyi onun keçidlərindən kənarda yerləşdirmək lazım olduqda çox əlverişsiz olacaq.
Konteyner2 (daşma: avtomatik; ) 
Üçüncü üsul, mənim fikrimcə, ən optimaldır. Birinci və ikinci üsulların üstünlükləri var: lazımsız elementlərin olmaması və aydın əmlakın istifadəsi. Onu həyata keçirmək üçün psevdo elementlərdən sonra istifadə etmək lazımdır. Bir div elementini simulyasiya etmək üçün istifadə edilə bilər. Onu görmək üçün fonu göstərin və hündürlüyü 0-dan 2px-ə dəyişin.
Konteyner3: sonra( məzmun: ""; ekran: blok; aydın: hər ikisi; hündürlük: 2px; fon rəngi: #000; )
CSS-də sarğıların qarşısını belə ala bilərsiniz. Bəlkə də bu problemi həll etməyin başqa yolları var, bilmək maraqlı olardı. Seçimlərinizi şərhlərdə yazın.
Çox vaxt layout dizaynerinə müəyyən qeyri-standart tapşırıqlar verilir. Məqsədimiz ən rasional və düzgün həlli təklif etməkdir. Bu gün biz təsvirin ətrafında mətnin bükülməsinin xüsusiyyətləri haqqında danışacağıq.
Problemin formalaşdırılması
İnformasiya resursunuz və ya bloqunuz üçün məqalə yazmaq çox vaxt yol boyu şəkillərin daxil edilməsi ilə müşayiət olunacaq. Axtarış robotu həmişə saytda şəkillərin olmasına hörmətlə yanaşdığından, istifadəçi parlaq şəkilləri olan mətndən daha çox məmnun olacaq. Beləliklə, mətn və şəkillər arasında gözəl qarşılıqlı əlaqəni təmin edəcək xüsusi formatlaşdırma metodunun quraşdırılması zərurəti yaranır.
Mətnin qablaşdırılmasının tələb olunmadığı halı nəzərdən keçirək. Üstəlik, mən universal bir seçim təklif edirəm - şəkil olmadıqda, mətn blokun bütün eni boyunca uzanır (bütün məqalələriniz illüstrasiyalarla müşayiət olunmayacaq). Mətn blokunun eni ciddi şəkildə müəyyən edilmir. Aşağıda blokumuz necə görünməlidir.
Düzgün həll
Tapşırığı yerinə yetirmək üçün iki blok yaradırıq: biri şəkil üçün, ikincisi mətn üçün. Şəklin altında başqa elementlərin ola biləcəyini nəzərə alaraq, şəkil üçün ayrıca konteyner yaradırıq, əks halda bu tələb olunmur, sadəcə olaraq şəkil teqinə tələb olunan klassı təyin edə bilərsiniz.
HTML
< div class = "image" > < img src= "img.png" width= "100px" height= "100px" alt= "" /> < div class = "text" >Mətn bloku
Ekran: daxili; )
Bu, şəkil ilə blokun ətrafına sarılacaq mətn üçün standart bir həlldir. Bu belə görünəcək:
Mətnə üzən obyektin xassələrinin təyin edilməsini təklif etmək olduqca məntiqli olardı. Obyekt genişlikləri təyin edilmədikdə, aşağıdakı şəkli alırıq:
Bu təsirin qarşısını almaq üçün sadəcə mətn blokunun enini təyin etməlisiniz, lakin bu, tapşırığımızın şərtlərinə cavab vermir.
Növbəti yaxşı seçim margin-left xüsusiyyətindən istifadə etmək olardı. Bir blog üçün, çox güman ki, bu blokdakı bütün şəkillər ölçüdə birləşdiriləcəyi üçün, həll, prinsipcə, pis və təsirli deyil. Ancaq bu, yalnız xüsusi bir haldır, çünki məqalədə şəkil yoxdursa, solda sadəcə boş bir zolaq olacaq. Bu bizə yaraşmır. Biz universal həll axtarırıq!
Və ən düzgün həll, tez-tez olduğu kimi, ən sadədir. Mətn blokunun istədiyiniz formatına nail olmaq üçün dəyərlə daşqın xüsusiyyətinə daxil olmalısınız gizli. Unikal Internet Explorer haqqında unutmayın. Həmişə olduğu kimi, o, özünü göstərir və əlavə diqqət tələb edir! Yaşlı adamımızın normal işləməsi üçün mətn blokuna float xassəsini əlavə edirik (daşmaq xassəsinə daxil olduqdan sonra sabit eni təyin etmək tələb olunmayacaq).
Beləliklə, vəzifəmizin şərtlərini təsvir edən alt hissədə şəkildə göstərilən effektə səbəb olacaq düzgün həll yoluna gəldik.
Şəkil ( float: sol; /*wrap */ kənar: 10px; /*gözəllik üçün xarici padding */ ekran: inline; /* IE6 üçün, sol kənarın ikiqat artmaması üçün */) . mətn (daşmaq: gizli; üzmək: sol; )
Metodun çatışmazlıqları və alternativi
İstifadədən ibarət olan metodun sadəliyinə və çox yönlülüyünə baxmayaraq daşqın:gizli, bir çatışmazlıq var. Mətn hissəsində açılan elementlərdən istifadə olunarsa, mülk artıq öz funksiyalarını yerinə yetirməyəcək.
Bu halda, istədiyiniz formatlaşdırmanı konfiqurasiya etmək üçün alternativə ehtiyacınız olacaq. Bu texnika birləşmənin funksionallığına əsaslanacaqdır ekran: masa xanası;. Bu həll eyni dərəcədə effektivdir, lakin sadəlik baxımından birinci üsuldan bir qədər aşağıdır. Bu metodu çağırarkən siz həmçinin İnternet Explorer mühitində işləmək üçün tərtibatı təyin etməlisiniz
Şəkil ( float: sol; /* sarğı təyin edin */ kənar: 10px; /* gözəllik üçün girinti */ ekran: inline; /* IE6 üçün, sol kənarın ikiqat artmaması üçün */) . mətn( ekran: cədvəl-xana; böyütmə: 1 ; /* Diqqətlə! Sətir yanlışdır */ }
Və bu həll layout zamanı nəzərə alınmalı olan öz xüsusiyyətlərinə malikdir. Mətn hissəsi kifayət qədər qısadırsa, növbəti blok mətn sinfi ilə blokun sağında göstərilir. Bunun qarşısını almaq üçün mətn blokunu və şəkli ayrıca konteynerə daxil etməlisiniz.
Hansı brauzerlərdə işləyir?
| 6.0+ | 5.0+ | 9.5+ | 4.0+ | 3.0+ | - | - |
Düzgün istifadə edildikdə, float elementləri hizalamaq və təşkil etmək üçün istifadə olunan güclü layout alətinə çevrilir. Bununla birlikdə, bu aləti nəzarət altında saxlamaq üçün əks çəki lazımdır, onsuz floatın böyük potensialı bir neçə dar vəzifəyə endirilir. Söhbət müxtəlif üsullardan istifadə edərək axını ləğv etməkdən gedir. Ən populyarlarından bir neçəsini sadalayaq.
Elementlərin eni
Əgər üzən elementlər bütün mövcud genişliyi tutursa, onlardan sonrakı qalan elementlər yeni sətirdə başlayacaq. Bunun üçün elementlərin ümumi eni 100% olmalıdır. Misal 1 bir sətirdə oxların necə yaradılacağını göstərir.
Misal 1: Genişlikdən istifadə
Ox olan hər blok indi 50% eni tutur və onlar 100%-ə qədər eni əlavə edirlər, buna görə də oxdan sonrakı abzas yeni sətirdən başlayır.
Bu üsul nadir hallarda istifadə olunur, çünki elementlərin enini həmişə açıq şəkildə təyin etmək mümkün olmur və metod blokun hündürlüyü və onun fonu ilə bağlı problemi həll etmir (şək. 1).
düyü. 1. Fon doldurulması yoxdur
Daşmadan istifadə
Təmizləyici şamandıra 2
Şəkildə göstərildiyi kimi veb səhifə yaradın. 1. Rubl işarələmək üçün ₽ simvolundan istifadə edin.
Cavabı göstər
