HTML

Dupa multe incercari am ajuns la solutia urmatoare:
Code: 
<img ... style="float:right;">
<span style="float:right;">Text 2</span>
<span>Text 1</span>
Ordinea e importanta.

Multumesc.
 
Uneori trebuie sa folosesti tabele, sau macar containere cu atribute specifice lor (display de tip table sau table-cell). Au niste insusiri pe care tipul block nu le are, cum ar fi faptul ca se restrang automat la dimensiunea continutului in loc sa tinda automat la 100%, sau faptul ca poti marca diverse elemente ca apartinand de aceeasi coloana sau rand si sa-si sincronizeze automat dimensiunile. Obtii efecte are-s imposibil de obtinut cu blocuri fara JavaScript, cum ar fi sa sincronizezi doua containere care au alte containere intre ele, sau sa compactezi un container fara sa-l scoti din flow si pastrandu-l inline, dar avand totodata proprietati block.

Pentru layouts e drept ca nici table model nici box model nu-s o solutie completa, de asta a aparut flexbox model in CSS3. S-a simtit nevoia de el dintotdeauna, dar masa critica s-a atins abia recent datorita proliferarii device-urilor portabile si a televizoarelor cu rezolutie mare, care au extins dramatic plaja de rezolutii folosite de catre public pe scara larga.
 
Uite aici niste exemple simpatice: http://umaar.github.io/css-flexbox-demo/.

Vezi ca doar cele mai recente versiuni de browsere suporta flexbox. Cu diverse amendamente. Chrome cu proprietati custom (-webkit-), Opera doar cel cu Webkit, Firefox implementeaza ultima versiune doar pe mobil, pe desktop are activata by default una mai veche (dar poti umbla la about:config), iar IE10 in dulcele stil clasic a facut o tocană din mai multe versiuni de flexbox.
 
You must log in or register to reply here.
Back
Top