Uzante CSS por aliĝi bildon al la maldekstra flanko de retpaĝaro Aranĝo
Rigardu preskaŭ ajnan retpaĝon hodiaŭ kaj vi vidos kombinaĵon de teksto kaj bildoj farante la plejparton de tiuj paĝoj. Estas tre facile aldoni tekston kaj bildojn al paĝo . La teksto estas kodita per normaj HTML-etikedoj kiel alineoj, listoj kaj rubrikoj, dum la bildoj estas inkluzivitaj per la elemento .
La kapablo fari tiun tekston kaj tiujn bildojn funkcii bone kune estas kio starigas grandajn retajn desegnistojn aparte! Vi ne nur volas ke via teksto kaj bildoj aperos unu post alia, kaj kiel ĉi tiuj blok-elementaj elementoj aranĝos defaŭlte. Ne, vi volas iom da kontrolo pri kiel la teksto kaj bildoj fluas kune en kio finfine estos la vida dezajno de via retejo.
Havante bildon, kiu estas aligita al la maldekstra flanko de paĝo, dum la teksto de tiu ĉi paĝo ĉirkaŭas ĝin estas komuna traktado por presita dezajno kaj ankaŭ por retpaĝoj. En teraj terminoj, ĉi tiu efiko estas konata kiel flosanta la bildon . Ĉi tiu stilo estas atingita per la CSS-posedaĵo por "flosado". Ĉi tiu propraĵo permesas tekston flui ĉirkaŭ la maldekstra-vicigita bildo al ĝia dekstra flanko. (Aŭ ĉirkaŭ dekstra vicigita bildo al ĝia maldekstra flanko.) Ni rigardu kiel atingi ĉi tiun vidan efikon.
Komencu kun HTML
La unua afero, kiun vi bezonos fari, havas iujn HTML por labori. Por nia ekzemplo, ni skribos alineon de teksto kaj aldonos bildon al la komenco de la alineo (antaŭ la teksto, sed post la malfermo
etikedo). Jen kio HTML-ŝajno aspektas kiel:
Defaŭlte, nia retpaĝo montriĝus kun la bildo supre de la teksto. Ĉi tio estas ĉar bildoj estas blok-nivelaj elementoj en HTML. Ĉi tio signifas, ke la retumilo montras linion-rompojn antaŭ kaj post la bildo-elemento defaŭlte. Ni ŝanĝos ĉi tiun defaŭltan aspekton turnante al CSS. Unue, tamen, ni aldonos klasan valoron al nia bildo-elemento . Tiu klaso agos kiel "hoko", kiun ni uzos poste en nia CSS.
Notu, ke ĉi tiu klaso de "maldekstra" faras nenion tute mem! Por ke ni atingu nian deziritan stilon, ni devas uzi CSS sekvantan.
CSS Stiloj
Kun nia HTML en loko, inkluzive de nia klaso atributo de "maldekstra", ni nun povas turni al CSS. Ni aldonus regulon al nia stilfolio, kiu flosos tiun bildon kaj ankaŭ aldonos iom da kompletigo apud ĝi, por ke la teksto, kiu finfine ĉirkaŭprenos la bildon, ne tro malhelpas ĝin. Jen la CSS, kiun vi povas skribi:
.left {flosas: maldekstre; kompletigo: 0 20px 20px 0; }Ĉi tiu stilo flosas tiun bildon maldekstren kaj aldonas iom da kompletigo (uzante iujn CSS-taĉmentaron) dekstre kaj malsupre de la bildo.
Se vi reviziis la paĝon, kiu enhavas ĉi tiun HTML en retumilo, la bildo nun estus vicigita al la maldekstra kaj la teksto de la alineo ŝajnas ĝustatempe kun taŭga kvanto da interspaco inter ambaŭ. Rimarku, ke la klasa valoro de "maldekstra", kiun ni uzis, estas arbitra. Ni povus nomi ĝin io ajn ĉar la termino "maldekstra" faras nenion por si mem. Ĉi tio bezonas havi klasan atributon en la HTML, kiu funkcias kun reala CSS-stilo, kiu diktas la vidajn ŝanĝojn, kiujn vi serĉas.
Alternativaj Vojoj Atingi Ĉi tiujn Stilojn
Ĉi tiu aliro doni la bildan elementon al klaso-atributo kaj poste uzi ĝeneralan CSS-stilon, kiu flosas la elementon, estas nur unu maniero, kiun vi povus plenumi ĉi tiu "maldekstra vicigita bildo". Vi ankaŭ povus forpreni la klasan valoron de la bildo kaj stiligi ĝin per CSS per skribanta pli specifan elektilon. Ekzemple, ni rigardu ekzemplon kie tiu bildo estas ene de divido kun klasa valoro de "ĉefa-enhavo".
Por stiri ĉi tiun bildon, vi povus skribi ĉi tiun CSS:
.main-enhavo img {float: left; kompletigo: 0 20px 20px 0; }En ĉi tiu skorio, nia bildo estus aligita al la maldekstra, kun la teksto flosanta ĉirkaŭ ĝi kiel antaŭe, sed ni ne bezonis aldoni ekstra klasan valoron al nia marko. Fari ĉi tion ĉe skalo povas helpi krei pli malgrandan HTML-dosieron, kiu estos pli facila por administri kaj ankaŭ povas helpi plibonigi la rendimenton.
Fine vi eĉ povus aldoni la stilojn rekte en vian HTML-markon, kiel ĉi:
Ĉi tiu metodo nomas " inline stiloj ". Ĝi ne estas konvena ĉar ĝi klare kombinas la stilon de elemento kun ĝia struktura marko. Plej bonaj praktikoj de la retejo diktas, ke la stilo kaj strukturo de paĝo devas resti apartaj. Ĉi tio estas speciale helpema kiam via paĝo devas ŝanĝi sian aranĝon kaj serĉi malsamajn ekranajn grandecojn kaj aparatojn kun respondema retejo. Havi la stilon de la paĝo interŝanĝita en la HTML faros ĝin multe pli malfacila al aŭtorrajtaj demandoj, kiuj ĝustigos la aspekton de via retejo laŭ necese por tiuj malsamaj ekranoj.
Originala artikolo de Jennifer Krynin. Redaktita de Jeremy Girard la 4/3/17.