Diva minunat
În primul rând, Buna ziua!
Din moment ce eu sunt mai mult decât serverul programator klientschik, de foarte multe ori există situații când aveți nevoie pentru a marca rapid pagina, iar acest lucru este în cazul în care încep problemele. La fel ca toate amintesc, dar gândurile mele rătăcească și sfârșesc prin a pierde o mulțime de timp pe amintiri și articole de corectură.
Ca o regulă, totul este întotdeauna acolo și căutarea reușește, dar există un lucru. Practic toate informațiile în limba engleză. Și chiar dacă știi limba corect, tot trebuie să tulpina. Chiar și pentru astfel de lucruri simple. Dar, totul este în mâinile noastre!
Astăzi ne uităm la două subiecte:
- Cum de a aranja câteva divuri orizontal, astfel încât acestea nu vor înota departe.
- Cum de a doua înălțime aceeași div dispus orizontal.
Nimic nou, nu aș spune că e doar o traducere a acestui iar acest lucru este acest articol din woorkup.com. Mai departe.
Trebuie să spun că Antonio Lupetti face ceea ce, în general, - se luptă cu IE6. Așa că atât placa nu este pentru măgar vechi. Pe de altă parte, chiar atât de lipsit de tact, autoritatea contractantă, pe care eu lucrez, și a inițiat tranziția. Cu toate acestea, până în prezent a fost doar inițializat.
Trebuie doar să adăugați la mine că ambele aceste probleme pot fi rezolvate prin utilizarea listelor
- , dar nu este chiar elegant. Fiecare instrument este cel mai bine utilizat pentru scopul propus.
Ca câteva divs poziționat într-un plan orizontal
Ideea de bază a acestui consiliu - utilizarea div-înveliș (înveliș) și un selector CSS: primul copil.
Deci, având în vedere: pentru a face câteva pagini ale blocului, distribuite uniform pe orizontală:
Codul sursă al acestui marcaj este extrem de simplu:
Pentru a aranja blocuri orizontal în coajă, avem nevoie de doar câteva linii de cod CSS. Primul lucru care vine în minte: .section declara o clasă cu proprietățile lățime și marja de-dreapta, cu valorile dorite. Dar marginea din dreapta a elementului din dreapta va acționa pentru limita de coajă:
Având în vedere că marginea din dreapta a elementului din dreapta depășește lățimea carcasei, în conformitate cu regulile de marcare bloc din dreapta „merge“ î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?
Este aici și este demn de amintit selector: primul copil, și se răstoarnă marginea din dreapta pe stânga. Astfel, liniuței stânga primului bloc a fost zero. Acest lucru ridică întrebarea: de ce invert? Problema este că, în IE7 | 8 suport: primul copil adăugat și: ultimul copil nu este. Salvați?
Deci, să ne uităm la soluțiile de cod CSS. Mai întâi, definiți plicul:
Acum, declară coajă de conținut clasa .section:
Exemplul utilizează valori fixe proprietăți lățime și marja de stânga. Puteți să procentajelor sale discreți.
Acum, avem nevoie pentru a elimina marginea din stânga a primei unități, se face după cum urmează:
Cum de a face mai multe divs aceeași înălțime
În acest tutorial Antonio oferă realizarea de coloane fictive de înălțime egală, folosind poziția de proprietate CSS: absolută și de frontieră.
Imaginați-vă că avem sarcina: este necesar să se realizeze dispunerea în două coloane, astfel încât înălțimea coloanei laterale este egală cu înălțimea de primar. Ilustrarea acestei probleme, după cum urmează:
Mai întâi descriem un marcaj:
Ca și în exemplul anterior, avem div-înveliș, care conține unități de „experimentale“.
cod CSS-shell arată astfel:
Să luăm în considerare în mod individual fiecare dintre vorbitori.
difuzor principal
Principalul vorbitor a prezentat id #maincontent. Acesta va conține conținutul paginii principale (de exemplu, posturi). Ilustrația prezintă caracteristica principală a acestui tutorial:
La marginea dreaptă a setului de coloane este foarte mare (de frontieră 200px). Această delimitare va fi un loc pentru coloana auxiliară (#sidebar). Pentru a face acest lucru, setați dummy fundal de umplere #sidebar, care va avea aceeași înălțime ca și principal. Descrierea principal stil vorbitori de mai jos:
Coloana auxiliară
Tot ceea ce rămâne pentru noi pentru a descrie #sidebar:
Lățimea coloanei auxiliare trebuie să fie aceeași ca și lățimea limitele principale coloanei (200px), iar stânga padding stânga margine trebuie să fie egală cu lățimea #maincontent conținutului.
Aceasta este ceea ce se întâmplă, ca urmare a:
Inconvenientele acestei metode
Peste tot și în toate există neajunsuri, acest aspect metodă nu este o excepție. În primul rând, lățimea coloanei trebuie fixată. În al doilea rând, fondul trebuie să fie la fel. Și în al treilea rând, sistemul de încălzire auxiliar trebuie să fie întotdeauna la o înălțime mai mică decât principalul.
Și, ca și cele mai recente momeală (sau desert): premiul!
Muzicianul, care a trezit o dată programator ;-) panoul frontal și cel din spate-end dezvoltator, generalisti. Twitter: @dkoprov.