Dacă sunteți interesat să aflați cum să flotați o imagine în partea dreaptă a textului, este o sarcină destul de simplă. Există multe situații în care programatorii doresc ca o imagine pe o pagină Web să apară în interiorul textului cu textul curgând sau înfășurat în jurul acestuia. Manipularea imaginilor este similar cu manipularea textului, deci dacă aveți experiență cu acesta din urmă, acest proces nu ar trebui să fie deloc greu.
De fapt, cu proprietatea CSS float, este ușor să flotați imaginea în partea dreaptă a textului și să faceți ca textul să curgă în jurul acestuia pe partea stanga. Utilizați acest tutorial de cinci minute pentru a afla cum.
Configurarea unui aspect cu Float
Acest aspect de bază va crea un spațiu pentru textul dvs. și va pluti o imagine în dreapta textului respectiv. Cu siguranță, aceste aspecte se pot complica, dar acest exemplu vă va arăta principiul de bază din spatele lucrului cu float și text.
Presupunând că aveți deja un document HTML cu care lucrați și o foaie de stil CSS separată, începeți prin crearea unui nou div care să acționeze ca rândul care conține elementul dvs. plutitor.
Oferiți noului div două clase, container și clearfix. Există o mulțime de modalități de a gestiona acest lucru, iar numele sunt în întregime alegerea dvs., dar acestea vă vor ajuta să rămâneți organizat și să vă stabiliți aspectul.
-
În CSS, definiți cum doriți ca containerul dvs. să se încadreze în aspectul general. Acest exemplu va face doar un rând cu lățime completă.
.container {
lățime: 100%;
înălțime: 25rem;
} -
Apoi, aveți grijă de clasa clearfix. Clearfix-ul este necesar deoarece float poate crea unele erori ciudate în aspectul dvs. Definirea proprietății „overflow” din clearfix oprește elementele plutite să curgă din spațiul lor desemnat.
.clearfix {
overflow: auto;
} -
Acum, puteți crea un element în divul containerului și îl puteți pluti spre dreapta. Dacă înfășurați text în jurul unei imagini, aceasta ar fi imaginea dvs. Creați elementul și dați-i o clasă pentru proprietatea float.
-
Creați clasa pentru plutitor. Probabil că veți dori să aruncați ceva stil acolo, dacă veți crea mai multe elemente identice. În caz contrar, puteți aplica o clasă separată pentru stilul dvs.
.flot-dreapta {
plutitor: dreapta;
lățime: 300px;
înălțime: 200px;
culoare de fundal: roșu;
margine: 0 0 0,5rem 0,5rem
} -
Dacă doriți să înfășurați text în jurul acelui element plutitor, introduceți textul acum. Puneți-l oriunde în recipient, fie înainte, fie după elementul plutit.
Un text
Mai mult text
...și așa mai departe.
-
Reîmprospătați pagina și verificați rezultatul.
Încheierea
Și asta o face. Acum vedeți că plutirea unei imagini spre dreapta nu este deloc dificilă. S-ar putea să vă intereseze, de asemenea, să flotați o imagine spre stânga și să o flotați spre centru. În timp ce prima mișcare este posibilă, din păcate, nu puteți pluti o imagine în centru, deoarece aceasta ar necesita de obicei un aspect cu două coloane.