A blokkok vízszintes elhelyezése - blog a webhelyek létrehozásáról, weboldalak fejlesztése
Főoldal »Blog» CSS »Blokkok elhelyezése vízszintesen
A blokkok vízszintes elhelyezése
Azonnal azt fogom mondani, hogy ezek a megoldások nem alkalmasak IE6-ra. Általánosságban elmondhatom, hogy mindenkit lőni kell, aki használja ezt a böngészőt -) Joke -)
Egy darab Nambier van (általában php-t kellett használnod):
Ezt meg kell tennünk:
A html-keretrendszert készítjük:
A blokkok vízszintes elrendezéséhez csak néhány sor CSS kódra van szükségünk. Az első dolog, ami eszembe jut, az, hogy deklarálja a .section osztályt a szélesség és a margó-jobb tulajdonságokkal, az értékekkel, amire szükségünk van. De a jobb szélső elem jobb oldali szélessége túlnyúlik a héj határain:
Mivel a jobb szélességű elem jobb szélessége meghaladja a héj szélességét, a jelölés szabályai szerint a jobb szélességű blokk leesik:
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, hogy emlékezzünk a szelektorra: az első gyermeket, és fordítsuk balra a jobb oldali behúzást. Így annak érdekében, hogy az első blokk behúzza a bal oldalt, hogy nulla legyen. Felmerül a kérdés: miért fordított? Az a helyzet, hogy az IE7 | 8 támogatásban: az első gyermek hozzá van adva, és az utolsó gyermek nem. Menteni?
Nézzük tehát a CSS megoldási kódot. Először meghatározzuk a shell-ot:
Most adja meg a .section shell tartalomosztályát:
A példa rögzített értékeket használ a szélesség és a margó-bal tulajdonságok tekintetében. A százalékos arányokat saját maga használhatja.
Most el kell távolítanunk az első mondat bal oldalán lévő behúzást, ez így történik:
#wrapper div: first-child margin-left: 0px;
>