Acasă »Blog» CSS »Poziționarea blocurilor pe orizontală
Poziționarea blocurilor pe orizontală
Imediat voi spune că aceste soluții nu sunt potrivite pentru IE6. În general, opinia mea ar trebui să tragă pe toți cei care folosesc acest browser -) Joke -)
O bucată de van Nambier (de obicei a trebuit să utilizați php):
Trebuie să facem acest lucru:
Facem cadrul html:
Pentru aranjarea orizontală a blocurilor din coajă, avem nevoie de doar câteva linii de cod CSS. Primul lucru care vine în minte este acela de a declara o clasă de secțiuni cu proprietățile de lățime și margine, cu valorile de care avem nevoie. Dar marginea dreaptă a elementului din dreapta va ieși dincolo de limitele cochiliei:
Deoarece marginea dreaptă a elementului din dreapta depășește lățimea cochiliei, în conformitate cu regulile de marcare, blocul din dreapta "frunze" în jos:
Se pune întrebarea: cum să eliminați „extra“ padding în blocul fără clasă specială din extrema dreaptă CSS ca proprietate marginea din dreapta va fi setat la 0?
Aici trebuie să ne amintim selectorul: primul copil și inversarea punctului drept spre stânga. Astfel, pentru ca primul bloc să indice stânga să fie zero. Se pune întrebarea: de ce invers? Lucrul este că în sprijinul IE7 | 8: primul copil este adăugat și: ultimul copil nu este. Salvați?
Deci, să ne uităm la codul soluției CSS. Mai întâi, definim shell-ul:
Acum, declarați clasa de conținut a shell-ului .section:
Exemplul utilizează valori fixe pentru proprietățile de lățime și margine-stânga. Puteți folosi procentele pe cont propriu.
Acum trebuie să înlăturați linia din stânga primului bloc, aceasta se face astfel:
#wrapper div: primul-copil marginea-stânga: 0px;
>
Articole similare
Trimiteți-le prietenilor: