Deci, a existat o altă sarcină complicată în implementarea interfeței cu utilizatorul. Există o masă. Inițial 3 coloane. Dar numărul de coloane poate fi mai mare. O coloană stângă de lățime fixă, o coloană din dreapta cu lățime necunoscută și o coloană centrală trebuie să ocupe tot spațiul rămas.
Se pare că nu este nimic complicat și cu ajutorul unei tabele standard pe html acest lucru se poate face într-un minut. Dar există o condiție suplimentară. Coloana din mijloc conține textul și când fereastra browserului este comprimată (și ar trebui să fie în 1 rând) începe să se taie și apare o elipsă.
Prin natura lor, tabelele nu vă permit să cultivați conținutul și să încercați întotdeauna să îl afișați. Ce ar trebui să fac? Există mai multe modalități de a rezolva problema. Să analizăm cel mai ușor și mai eficient (din punctul meu de vedere).
Mai întâi, creați un tabel cu trei coloane. Definim clasele, scrieți conținutul:
Textul celei de-a doua coloane nu am încheiat în zadar în 2 div. Dar mai mult despre asta mai târziu. Să trecem la stiluri:
Ce facem? Pe scurt: setați lățimea primei și ultimei celule (deși acestea pot fi oricare, inclusiv cele dinamice), setați culorile de fundal (pentru o mai bună percepție vizuală a exemplului), în general, nimic interesant. Să analizăm cea mai interesantă bucată de cod:
În primul caz, setăm poziția: relativă (astfel încât toate elementele interne să fie poziționate în raport cu aceasta - puteți seta această proprietate și celula, dar Mozilla FireFox nu știe cum să facă acest lucru cu celula), min-width: 43px; - lățimea minimă (altfel celula se va prăbuși complet), înălțimea: 20px; - înălțime.
În cel de-al doilea caz, setați următoarele: white-space: nowrap; - interzic transferul de linii (textul nostru trebuie să fie în 1 rând), poziția: absolută; - absolut poziționată în raport cu mama sa (div), max-width: 100%; - lățimea maximă a elementului (puteți utiliza lățimea), overflow: hidden; - ascundeți conținut care depășește elementul, text-overflow: ellipsis; - Adăugați o eliptică în text.
Asta e tot. Codul paginii complete:
Trimiteți-le prietenilor: