Csodálatos díva, HTML és CSS
csodálatos díva
Először is, Hello!
Mivel én több szerver programozó mint klientschik nagyon gyakran vannak olyan helyzetek, amikor szükség van, hogy gyorsan jelölje meg az oldalt, és ez az, ahol a problémák kezdődnek. Mint minden emlékszem, de a gondolataim vándorol, és a végén pazarlás sok időt memóriák és lektorálás cikkeket.
Általános szabály, hogy minden mindig ott, és a keresés sikerrel, de van egy dolog. Alapvetően minden információt angolul. És akkor is, ha ismeri a nyelvet rendesen, akkor is kell a törzs. Még az ilyen egyszerű dolgokat. De, minden a mi kezünkben van!
Ma nézzük két témában:
- Hogyan gondoskodik néhány divs vízszintesen úgy, hogy nem fognak elúszni.
- Hogyan két vízszintesen elhelyezett div ugyanabban a magasságban.
Semmi új, nem mondanám, hogy ez csak egy fordítása ennek, és ez ebben a cikkben woorkup.com. Folytassuk.
Azt kell mondanom, hogy Antonio Lupetti helyesen cselekszik általában - küzd IE6. Annak érdekében, hogy mind a tábla nem a régi szamár. Másrészt, még olyan ügyetlen, az ajánlatkérő, amelyen dolgozom, és kezdeményezte az átmenet. Eddig azonban csak inicializálták.
Csak add el magamtól, hogy mindkét probléma megoldható a használata listák
- , de ez nem éppen elegáns. Minden eszköz a legjobb, ha a rendeltetésének megfelelő célokra.
Mivel néhány divs elhelyezett vízszintes síkban
Az alapötlet E tanács - használja div-wrapper (wrapper) és egy választó CSS: first-child.
Tehát, mivel: hogy egy pár oldalt a blokk, egyenletesen elosztva a vízszintes:
A forráskód e jelölés rendkívül egyszerű:
Annak érdekében, hogy gondoskodjon a blokk vízszintesen a shell, meg kell csak néhány sornyi CSS kódot. Az első dolog, ami eszembe jut: .section nyilvánítja egy osztály tulajdonságainak szélesség és margin-right, a kívánt értékeket. De ez jobb margó a jobb szélső elem jár a határ a héj:
Mivel a jobb margó a jobb szélső elem meghaladja a szélessége a héj, a szabályok szerint jelölő jobboldali blokk „megy” le:
Felmerül a kérdés: hogyan lehet eltávolítani az „extra” padding a jobb szélső blokk nélkül külön CSS osztály margin-right Legyen a 0?
Itt van, és érdemes megjegyezni választó: első gyermek, és fordítsa a jobb margó a bal oldalon. Így, hogy a bal francia az első blokk nulla volt. Felmerül a kérdés: miért fordítsa? A lényeg az, hogy az IE7 | 8 támogatás: first-child hozzá, és: az utolsó gyerek nem. Menteni?
Tehát nézzük meg a CSS kódot megoldásokat. Először határozza meg a borítékot:
Most nyilvánítja osztály tartalom .section héj:
A példa rögzített értékek tulajdonságok szélesség és margin-left. Ön saját belátása használatát százalékok.
Most arra van szükség, hogy távolítsa el a bal margó az első egység, akkor az alábbiak szerint történik:
Hogyan lehet több divs azonos magasságban
Ebben a tutorial Antonio kínál megvalósítása fiktív oszlopok azonos magasságú, a CSS tulajdonság position: absolute és határon.
Képzeljük el, hogy mi a feladat: meg kell megvalósítani az elrendezés két oszlopban úgy, hogy a magassága az oldalsó oszlop magasságával egyenlő az elsődleges. Illusztráció A probléma a következő:
Először leírjuk a jelölés:
Csakúgy, mint az előző példában, van div-átalakító, amely tartalmazza a „kísérleti” egység.
CSS-shell kód így néz ki:
Nézzük egyenként az egyes hangszórók.
fő hangszóró
A fő hangszóró bemutatott id #maincontent. Ez tartalmazza majd a kezdőlapra (például hozzászólás). Az ábrán a fő jellemzője ez a bemutató:
A jobb szélén az oszlop készlet nagyon nagy (határ 200px). Ez a határ egy olyan hely lesz a kiegészítő oszlop (#sidebar). Ehhez állítsa be a dummy kitöltés #sidebar háttér, amely ugyanabban a magasságban, mint a fő. Leírás A fő hangfalak stílus alább:
A kiegészítő oszlop
Minden, ami továbbra számunkra leírni #sidebar:
A szélessége a kiegészítő oszlop ugyanannak kell lennie, mint a szélessége a fő oszlopot határokat (200px), és a bal margó-bal padding egyenlőnek kell lennie a szélessége a tartalmát #maincontent.
Ez történik, ennek eredményeként:
Hátrányai ennek a módszernek
Mindenhol és mindenben vannak hiányosságok, ez a módszer az elrendezés sem kivétel. Először is, az oszlop szélességét kell rögzíteni. Másodszor, a háttérben meg kell egyeznie. És harmadszor, a kiegészítő fűtés legyen mindíg magassága kisebb, mint a megbízó.
És, mint a legújabb csalit (vagy desszert): díjat!
A zenész, aki egyszer felébredt programozó ;-) front- és back-end fejlesztő, generalista. Twitter: @dkoprov.