Alapvető módszerek elhelyezése blokkok (div) vízszintesen CSS segítségével, Vaden pro

Gyakran előfordul, hogy a gyakorlatban, meg kell oldani a problémát a csoportosítás és összehangolás CSS tartalmat. Ma megnézzük az alapvető módon forgalomba elemek egy vízszintes sorban.

Az anyag ebben a cikkben célja, hogy segítse a kezdő webes tervezők tanulni elrendezési technikákat a web-oldalakat.

Közül választhat, vagy módszerek

Számos módja van helye a szerkezeti elemek egy sorban a vízszintes síkban. A leghasznosabb, abból a szempontból gyakorlati haszna, a következők:

Mindegyik megvannak a maga előnyei, hátrányai és alkalmazások. Nézzük meg őket sorrendben.

„Bunkó”, vagy egy kicsit az elméleti

Minden szerkezeti HTML elemek sorolhatók:

Inlaynovye (beépített) - mint például a img, span, és hasonlók. Nem vagyunk képesek változtatni a háttérben, és kérje meg őket, tetszőleges lineáris méretei.

Blokk - elfoglalja a teljes szélességében a szülői egység, mindig kezdeni egy új sort - p, h, div.

Egy szemléltető példa a beépített és blokk szerkezetek az alábbiak szerint:

«Float» Method

Mint már ismeretes (lásd. Fent), egy blokk tagja feltöltött egy új sort, függetlenül az előre meghatározott szélességű rá (szélesség). Eszerint, csökkentve a vízszintes méretét div, egy sorban fűzőlyukak nem épít.

A legnépszerűbb (különösen a kezdő webes tervezők), a megoldási módja az, hogy az a tulajdonságait úszó.

CSS float tulajdonság szerzett egy csomó népszerűsége és gyakorlati értékét, miután az átmenetet a táblázat elrendezés a blokk módszer.

Float: bal (jobb) átalakítja a blokk elem lebegő, beigazítja a bal (jobb) szélét a szülői egység és beállítja az áramlás körül a jobb (bal), szöveg és egyéb elemek.

Például, mi hozza létre a négy blokkot kell elhelyezni egy sorban:

És a külső stíluslap a következő tartalommal:

Az eredmény négy blokk egy vízszintes sorban, és igazodnak a bal szélén a szülői egység:

Néha a gyakorlatban ez szükséges összehangolni a blokkokat a jobb szélén a szülő elem. Változás körüli áramlás a blokkokat az előző példában:

Ügyeljen arra, hogy a címkéket található a blokkokat. Első pillantásra úgy tűnhet, hogy a példa dolgozott görbe. Valójában azonban a böngésző már feldolgozta a kódot helyesen: Olvasd el a blokkot, fentről lefelé, és azt tette, amit kértünk tőle - Jobbra igazítás. Megjegyzendő, hogy ez ponton, ha az ingatlan a float: right.

Annak érdekében, hogy megszakítja az áramlás körül az elemek egy adott helyen, akkor a következő sort:

A távolság a blokkok a fenti példában, kértük behúzás margin-right. De mi van, ha van egy feladat elrendezés oldal helyét a blokkok egy sorban, hogy összehangolják azokat, és még ez is csak padding között, de nem kívül?

Az algoritmus a következő.

Ennek eredményeképpen megkapjuk a következő kép:

Nos, minden gyakorlati helyzetekben nem veszik figyelembe, útközben a közös jellemzőit.

1. A szélessége a blokkokat kell rögzíteni. Ellenkező esetben, ha kap valamit, mint ez:

Amikor méretének csökkentése a szülői egység vagy egy webböngésző, nem fér bele a blokkokat mozgatni le alatt egymást. Annak elkerülése érdekében olyan közös, alkalmazza a min-width tulajdonság.

Ne felejtsük el a! DOCTYPE A dokumentum, kivéve, ha megjeleníti a oldal IE, alkalmazva a fent leírt módszerrel a vízszintes elhelyezése blokk, akkor behúzni a megfelelő sorrendben 17px (talán a fejlesztők szerint a tekercset jelölt ki).

Hogy elkerüljük a megjelenítés a különbségek a különböző böngészőkben, néhány web mesterek javasoljuk, hogy a pontos érték a margin és padding tulajdonságok a szervezet számára.

Ellentétben a módszer «inline-block» ne fogyjon a jelenléte a szakadékot a blokk hiányában margin-s.

Hogy meghatározza a francia és a mezők, ha forgalomba elemeket használja tulajdonságai margin és padding.

Módszer «inline-block»

Mint egy kis és blokk elemek megvannak az előnyei és hátrányai keretében minden egyes feladathoz. És mi van, ha egyesítik az előnyei?

Meet, köröm a program - display tulajdonság: inline-block.

display: inline-block generál egy blokk-line elem, amely lényegében lineáris, de megtartja blokk tulajdonságait - lehet változtatni a lineáris méretei, margót, francia, stb

Blokk-line elemnek az alábbi tulajdonságokkal:

• magassága és szélessége a blokk automatikusan határozza meg a tartalmát és jelentőségét a bemélyedés (padding)
• magassága és szélessége a blokk lehet meghatározni rögzített
• Nincs hatással az összeomlás határokat.

Tekintsük a példát: létrehozunk egy egyszerű navigációs menü, amely képeket és linkeket.

Az eredmény egy olyan menü:

Mint látható, ez jött ki görbe. De nem lesz ideges, hogy mi vonatkozik a mi Divas CSS tulajdonság vertical-align (a részleteket lásd alább).

Most a navigációs sáv szintben a felső sorban:

Természetesen a fenti példa egy primitív, de biztos vagyok benne, hogy ezen az alapon akkor képes lesz arra, hogy hozzon létre egy igazi remekmű.

1. Ha csökkenti a szélessége a böngésző ablak nevmeschayuschiysya peremeschaetsya le elemmel (például abban az esetben, float: left)
2. Elem jelenik inline-block érzékeny terek. Ez vezet az a tény, hogy még nulla értékek közötti árrés blokkok egy rés. Ez a különbség függ a használt betűtípus. Vegyük például a lista:
   HTML:
   

Az eredmény a renderelés ilyen kódot lenne a következő kép:

Számos módja van, hogy távolítsa el a hiányosságokat:

• A negatív értékek margin:
  

adja meg a betűtípus-méret: 0 a szülő egység és a font-size ≠ 0 inlaynovogo;

nem túl szép, de még mindig ... Írj egy kódot egy sorban

Az eredmény alkalmazása bármely fenti módszerek a következő szerkezetű:

Ha több blokk-line elemek egy sorban különböző magasságúak, akkor be kell állítani a tulajdonság vertical-align: top. Hadd emlékeztessem önöket, hogy az alapértelmezett vertical-align állítva az alapvonalra.

Cross-browser.

• Az ősi verziói Firefox hozzá a következő sorokat:
  

és csomagolja az elem további div-wrapper.

IE 7 és korábbi verziók - add a következő sorokat:

Megjegyezzük, hogy egyes böngészők (az első - Firefox, a másik - IE) ezeket a sorokat szelektíven reagálni.

«Asztal» Method

Táblázatos megközelítés régóta szokásos elrendezés, amely elsősorban az egyszerűség és intuitív elrendezése. Valószínűleg ez volt az oka a táblázat formázása CSS.

Tulajdonságok display: table (. Táblázat cellás inline-table), lehetővé teszik a táblázat formázási elemek használata nélkül HTML táblázatok.

A vízszintes elhelyezés blokk, meg kell szülő elem, amelynek olyan megjelenítési tulajdonság: asztalra. és a gyermek elemek (sejtek), amelyek a tulajdonság display: table-cell:

1. Ezzel szemben a módszerek «inline-block» és a «float», és csökken a szélessége a böngésző ablakot, a sejtek nem mozog lefelé.
2. Nem kell a lehetőséget, hogy állítsa be a margin tulajdonság pszeudo sejteket.
3. Cross-browser. Az ingatlan a család display: table * nem támogatja IE6, IE7. Ezen túlmenően, IE8, akkor tartsa be a dinamikus hiba rendering psevdotablichnyh elemek formájában véletlenszerűen eltűnő sejteket. Ezt a hibát leggyakrabban látható a primer rajz dokumentum

Count: 15 (átlagosan 4,8 5-ből)