Benotzt de CSS Schwämm Immobilie zu Webdesign Webdesign Layout
D'CSS-Eigenschaft ass eng ganz wichteg Eigentlech fir den Layout. Et erlaabt Iech Är Websäit ze designen genau wéi Dir wëllt se ze weisen - awer fir se ze benotzen, musst Dir wëssen, wéi et funktionnéiert.
An engem Stilblat, kuckt d'CSS Schwämm Immobilie wéi dat:
.right {Schwämm: riets; }}
Dëst erzielt den Browser, datt alles mat der Klass vum "Recht" misst riets erofgesat ginn.
Dir géift et esou maachen:
class = "right" />
Wat kënnt Dir mat der CSS Schwämm Immobilie fléien?
Dir kënnt net all Element op enger Websäit fléien. Dir kënnt nëmmen blockbléckt Elemente schwächen. Dëst sinn Elementer déi e Block vum Weltraum ophuelen, wéi Biller (), Paragraphen (), Divisiounen (), an Lëschten ().
Aner Elementer déi den Text beaflosse loossen, awer keng Këscht op der Säit erstallt ginn Inline-Elemente genannt an däerf net fléien. Dëst sinn Elemente wéi Spann (), Line Breaks (), staark Betons (), oder Kursiv ().
Wou slo si se schwätzen?
Dir kënnt Elementer op der rietser oder lénks eroflueden. All Element deen dem Schwammeleng opgaang ass de Floss iwwer déi aner Säit.
Zum Beispill, wann ech e Bild op der lénker Säit schwächen, gëtt all Text oder aner Elementer no der Stréck ronderëm fléien. A wann ech e Bild op der richteg fléien, gëtt all Text oder aner Elementer no der Stréck ronderem dréit. E Bild deen an engem Textblock gesat gëtt, ouni iergendeng Floatstil applizéiert ze gesinn, awer de Browser gëtt fir d'Biller ze weisen.
Dëst ass normalerweis mat der éischter Zeil vun dësem Text am ënneschten Deel vum Bild.
Wéi wäit wëlle se de Float?
Een Element dee scho geplënnert ass esou wäit wéi de lénks oder riets vum Containerelement wéi et kann. Dëst Resultat a verschidde verschiddene Situatiounen hänkt dovun of, wéi Ären Code geschriwwe steet.
Fir dës Beispiller ginn ech e klengt DIV-Element op der lénkser Säit:
- Wann de Schwämm Element net eng viraffe Breet ass, da gëtt et esou vill horizontal Plaz wéi néideg a verfügbar, egal vu Schwämm. Bemierkung: verschidde Browser navigéiere probéiert Elementer nieft Schwemm elementar ze plazéieren, wann d'Breed net definéiert ass - normalerweis de net-float Element just nëmmen eng kleng Platz. Also sollt Dir ëmmer eng Breet op gefleecht Elementer definéieren.
- Wann de Containerelement den HTML Element ass, sëtzt de Schwämm DIV um lénksen Rand vun der Säit.
- Wann de Containerelement selbststänneg ass, gëtt de Schwämm DIV um lénksen Rand vum Container.
- Dir kënnt d'Schwieregkeete flotter Elementer, an dat kann zu der Schwächt erreechen, déi zu enger iwwerraschender Plaz endend ass. Zum Beispill ass dëse Schwämm e lénks drëtten DIV am richtege float DIV.
- Floated Elementer solle niddereg si nëtzlech sinn, wann et Plaz am Container ass. Zum Beispill huet dësen Container dräi 100px breet DIV Elementer an engem 400px breiten Container geschloen.
Dir kënnt souguer Float benotzen fir e Fotogalage-Layout ze kreéieren. Dir kënnt all Vignette huelen (et funktionnéiert am beschten wann se déi selwecht Gréisst sinn) an engem DIV mat der Ënnerschrëft an de Floss den DIV Elementer am Container.
Egal wéi wäit d'Browserfenêt läit, ginn d'Thumbnails lancéiert.
Aus dem Float
Wann Dir wësst wéi een Element kritt fir ze fléien, ass et wichteg fir ze wëssen wat fir de Schwämm ëmzekippen. Dir schreift de Schwäif mat der CSS kloer Eegeschafte. Dir kënnt lénks Erleedung iwwerdréit, riicht schwätzt oder béid:
kloer: lénks;
kloer: Recht;
kloer: béid
All Element, deen Dir déi kloer Eegeschafte festleet, steet ënner engem Element deen an där Richtung flott ass. Zum Beispill, an dësem Beispill sinn déi éischt zwou Parzellen vum Text net geläscht, mä drëtt ass.
Spill mam klore Wert vun verschiddene Elementer an Ären Dokumenter fir verschidde Layout-Effekter ze kréien.
Ee vun de interessant Schwieregkeete Layout ass eng Serie vu Biller an der richteger oder lénkser Kolonn niewent Paragrafen vum Text. Och wann de Text net laang genuch fir am Bild ze scrollen, kënnt Dir op all de Biller kloer opsetzen fir datt se an der Kolonn anstatt am nächste Bild sinn.
De HTML (widderhuelen dësen Paragraphe):
Duis sinn falsch ze déngen gitt eiusmod tempor incuntidunt fir ze refutéieren an haaptsächlech. Cupidatat net parident, aus Labor an dolore magna aliqua.
D'CSS (fir d'Biller nei lénks ze schwammen):
img.float {Schwämm: lénks;
kloer: lénks;
Spillraum: 5px;
}}
A nach riets:
img.float {Schwämm: richteg;
kloer: Recht;
Spillraum: 5px;
}}
Floats fir Layout benotzt
Sidd Dir verstitt, wéi d'Schwämm Immobilie funktionnéiert, kënnt Dir ën Ufank benotze fir Är Websäiten opzemaachen. Dëst sinn d'Schrëtt, déi ech huelen fir eng flott Websäit z'erstellen:
- Gestalt de Layout (op Pabeier oder an engem Grafikeinstrument oder am Kapp).
- Bestëmmt, wou d'Divisioune Säite sinn.
- Bestëmmt d'Breedungen vun de verschiddene Container an d'Elemente vun hinnen.
- Schwätze mer alles. Och de äusserst Container-Element gëtt op der lénker Flott gedréckt, fir datt ech wëssen wou et an der Bezuelung vum Browser kuckt.
Sou laang du weess datt d'Breedungen (Prozentsaache fein) vun Äere Layout-Rubriken sinn, kënnt Dir d'Schwämm Immobilie benotzen fir se se ze setzen, wou se vun der Säit gehéieren. An dat schéin ass et, Dir musst net sou vill wéi dat Boxmodell fir Internet Explorer oder Firefox ënnerschreiwen.