Igazítása magassága konténerek elrendezés divami master-web
Úgy gondolom, hogy mindenki, aki észre előnyeit elrendezés rétegek egy asztal elrendezés, vagy nem tud figyelni, hogy az egyik, ami engem illet, egy jelentős hátránya a blokk oldalán. Mi ez? Ez a magasság konteynerov.Rabotaya másik projekt, megpróbáltam több megoldás erre a problémára, és kivel szeretnék bemutatni, hogy ezt a cikket.
Sajnos, ha az általunk használt három- vagy két hasábos elrendezés kiszabására „rétegek”, az eredmény lenne a magassága a konténer teljesen független a magassága a szomszédos blokkok. És közvetlenül függ a tartalmi blokk azokra alkalmazott és behúzás szabályai (padding). Annak ellenére, hogy a hiányosságokat, az asztal, mintha önmagukban megoldani ezt a problémát azáltal, hogy a kapcsolat a szomszédos oszlopok. Abban az esetben, a használata a blokkokat a kimeneti van egy teljesen független konténerek.

minta oldal
table-layout

Példa elrendezés „rétegek”
Így például, meg kell igazítani a magassága a tartály, függetlenül azok tartalmát. Alapvetően két módon lehet megtenni. Az első kizárólag a tervezési döntés, és a második használható Javasript.
használata isklyuchitelnoCSS
Tehát, az első út az úgynevezett „hamis” oszlopban és a lényeg nagyon egyszerű és banális. Nagyon jó e módszer leírása megtalálható Dan Sederholm Faux oszlopok. E szerint a példa egy háttérképet, amelyre az ismétlés függőlegesen, és ennek eredményeként kapott a hatás egyenlő magasságú hangszórók.
háttér: #ccc url (../ images / bg_birch_800.gif) repeat-y 50 0%;
Ennek lényege abban rejlik, hogy az első arány kiszámítása pixel oszlopszélességeket különböző felbontású, akkor mindezt lefordítva százalékos, majd a háttérképet, hogy az illúziót kelti az oszlop van rendelve az elhelyezése százalékban szerint a számított adatok.
Recepció lehet használni két vagy három oszlopa van, csak abban az esetben a három oszlop kell adnia egy másik al-tárolóban az elrendezés.
A hatalmas plusz ez a módszer - ez tisztán CSS. Azonban ez jó, akkor, amikor egyenesen határain használt tartályok a tervezési koncepció. De, sajnos, ez a technika nem alkalmazható a tervezés, a blokkok, amelyek testre szabott (kerekítve) sarkok.
Abban az esetben, használja lekerekített sarkok, nem tudtam csinálni használata nélkül Javasript.
Van egy csomó script lehetőséget, hogy megoldja a problémát a magas hangszóró. Azért választottam szkripteket, amelyek segítségével a különböző megoldások különböző problémákat.
Ástam bele a ládákat www.dynamicdrive.com széles körben használják részeként a kész alap elrendezés, amelyeket bemutatnak az oldalon, mint a sablon.
Ez vonatkozik ez nagyon egyszerűen. Be kell másolni a script «equalcolumns.js» Forgatókönyvei könyvtárat vagy a könyvtárban, hogy használja ezt a webhelyen. És akkor írja elő a link a script az oldal kódja között
:Annak érdekében, hogy a forgatókönyvet a munkát a kívánt elrendezést módosíthatja az alapbeállításokat a script fájlt ide:
ddequalcolumns.columnswatch = [ «leftcolumn», «rightcolumn», «contentwrapper»]
Ennek megfelelően «leftcolumn», «rightcolumn», «contentwrapper» - változtatni a nevét a stílusok.
Azt tesztelték, hogy személyesen, végül megkapta a teljes támogatást az eredmény a FireFox 1.0 vagy újabb, Opera 7-es verzió és a Safari. Sajnos IE6-7 látták, nagyon furcsa bug növénytermesztés lábléc. Inkább láblécet jelen van, de azt nem lehet rögzíteni a látható terület a böngésző ablakot, mindig megjelent görgetés mérete + lábléc. Azonban teszteltem csak egy modell, az elrendezés, és lehetséges, hogy ha egy további megvalósítási módja az elhelyezése a hiba nem fog konténerek. Próbáld meg ezt a címkézés.
- PVII azonos magasságú CSS oszlopok - alapvetően csak az azonos nevet más fejlesztők és a többi szkript ezt.
Az elv megvalósítása a szabvány forgatókönyv - címkék között
a kódot beszúrni egy linket a script:Ahhoz azonban, hogy script dolgozni kell címkézni
Add a hívást a kripta:Onload kérés egy válogatást tartalmaz a felvétel a script (1 = igen, 0 = nem), valamint a változók listáját, gdec1 - egy osztály vagy azonosító neve az edény, amelyre a forgatókönyvet, P - az utolsó választó amelyet ebben a tartályban.
A példákban a helyszínen a fejlesztők minden jól működik. Tekintettel azonban a dinamikus modell a végső cél a szelektor vonzott nem mindig, az utolsó választó változhat. Egy másik változat szerint helyezze a választó közvetlenül az elrendezés. De általában kapcsolatban az elrendezés, amely tesztelte első forgatókönyv, hogy nem működött. Ismét megjegyzem, hogy a hagyományos statikus script kell működnie - kísérletet.
És végül, a harmadik indokolják. Ez, nekem személyesen, úgy tűnt, a legvonzóbb, és bebizonyította, működőképes a vizsgálati jel 100% -os.
- Script kiválasztása maximális magassága a tartály azzal a kiegészítéssel .class, mint egy érv az Djamil Legato és Andy Miller. A szkript a munkájához Mootools 1.11
Az elv itt a szkript maga:
var maxHeight = függvény (classname)
var divs = document.getElements ( 'div.' + classname);
max = Math.max (max, div.getSize () size.y.);
maxHeight.delay (500, maxHeight, 'sameheight');
„Sameheight” - ez csak a neve az osztály, amely érvként. Persze lehet nevezni, amit akarsz.