ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ. ΠΡΠΌΠ΅Π½Π° ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΡ
ΠΡΠ΅ HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° Π²Π΅Π± ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π² ΠΎΠ±ΡΠ΅ΠΌ ΠΏΠΎΡΠΎΠΊΠ΅, ΡΠ²Π΅ΡΡ Ρ Π²Π½ΠΈΠ· (Π΄Π»Ρ Π±Π»ΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²) ΠΈ ΡΠ»Π΅Π²Π° Π½Π° ΠΏΡΠ°Π²ΠΎ (Π΄Π»Ρ ΡΡΡΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²). Π’Π°ΠΊΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠ°Π»ΠΎ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π΅Π½, Π½ΠΎ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ CSS ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ Π² Π»ΡΡΡΡΡ ΡΡΠΎΡΠΎΠ½Ρ.
ΠΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ float ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌ, ΡΠΌΠ΅ΡΠ°Ρ Π΅Π³ΠΎ Π² Π»Π΅Π²ΡΡ ΠΈΠ»ΠΈ ΠΏΡΠ°Π²ΡΡ ΡΡΠΎΡΠΎΠ½Ρ, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ:
- left — ΡΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π»Π΅Π²ΠΎ
- right — ΡΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΠΏΡΠ°Π²ΠΎ
- none — ΠΎΡΠΌΠ΅Π½ΡΠ΅Ρ ΠΏΠ»Π°Π²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΌ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π°Π»ΠΈΡΠΈΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ (width).
ΠΠΎΠ³Π΄Π° Π²Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΠ΅ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ Π΅Π³ΠΎ Π² ΠΊΠΎΠ΄Π΅ ΠΏΡΡΠΌΠΎ ΠΏΠΎΠ΄ ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, ΠΏΠΎΠ΄ ΠΊΠΎΡΠΎΡΡΠΌ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ «ΠΏΠ»Π°Π²Π°ΡΡ», Π²ΡΡ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠ΅ Π² ΠΊΠΎΠ΄Π΅ ΠΏΠΎΠ΄ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ Π΅Π³ΠΎ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΡΠΎ, ΠΊΠ°ΠΊ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.
CΠ½Π°ΡΠ°Π»Π° Π±ΡΠ°ΡΠ·Π΅Ρ Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, Π΄Π²ΠΈΠ³Π°ΡΡΡ ΡΠ²Π΅ΡΡ Ρ Π²Π½ΠΈΠ·, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ Π²ΡΡΡΠ΅ΡΠ°Π΅Ρ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅Ρ Π΅Π³ΠΎ Ρ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ. ΠΡΠ°ΡΠ·Π΅Ρ ΠΈΡΠΊΠ»ΡΡΠ°Π΅Ρ ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ· ΠΎΠ±ΡΠ΅Π³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°, ΠΈ Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΎΠ½ «ΠΏΠ»Π°Π²Π°Π΅Ρ» Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ» ΠΈΡΠΊΠ»ΡΡΡΠ½ ΠΈΠ· ΠΎΠ±ΡΠ΅Π³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°, ΡΠΎ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ Π±Π»ΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π² ΠΊΠΎΠ΄Π΅ ΠΏΠΎΡΠ»Π΅ Π½Π΅Π³ΠΎ, Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ°ΠΊ, Π±ΡΠ΄ΡΠΎ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ°ΠΌ ΠΈ Π½Π΅ Π±ΡΠ»ΠΎ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π±Π»ΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΏΠΎΠ΄ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°ΡΡΡΡ ΠΎΠ±ΡΠ΅Π³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°.
ΠΡΠ»ΠΈ Π²Ρ Π²Π½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΡΠΈΡΡΠ½ΠΎΠΊ, ΡΠΎ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π±Π»ΠΎΡΠ½ΡΡ , ΠΏΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ ΡΡΡΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ»ΠΈ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ Π²Π½ΡΡΡΠΈ Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΡΠΈΡΡΠ²Π°ΡΡΡΡ Π³ΡΠ°Π½ΠΈΡΡ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΏΠΎΡΡΠΎΠΌΡ ΡΡΡΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ ΡΠ΅ΠΊΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ Π΅Π³ΠΎ.
ΠΠΌΠ΅ΠΉΡΠ΅ Π²Π²ΠΈΠ΄Ρ, ΡΡΠΎ Π² ΠΎΠ΄Π½ΠΎΠΌ ΡΡΠ΄Ρ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π΅ΡΠ»ΠΈ ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΈΡΠΈΠ½Π° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈΠ³Π½ΠΎΡΠΈΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ float.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°</title> <style> p { width: 250px; } img { float: left; } </style> </head> <body> <p> <img src="css.png"> Π‘ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π° float ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π±ΡΠ»Π° ΡΠ΄Π΅Π»Π°Π½Π° ΠΏΠ»Π°Π²Π°ΡΡΠ΅ΠΉ Ρ Π»Π΅Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ. Π’Π΅ΠΊΡΡ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠΉ Π² HTML ΠΊΠΎΠ΄Π΅ Π½ΠΈΠΆΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΉ ΠΈ Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΡΠΎΡΠΎΠ½Π΅.</p> </body> </html>
ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΡΡΡΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ ΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ, ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡΠΈΠΌ Π΅Π΅, Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΡΠΌΠ΅ΡΠ΅Π½Π° ΠΊ Π»Π΅Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΠ΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΏΡΠ°Π²Π° ΠΈ ΡΠ½ΠΈΠ·Ρ, ΡΡΠΎΠ±Ρ ΡΠ»Π΅Π³ΠΊΠ° ΠΎΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡ ΠΎΡ Π½Π΅Π΅ ΡΠ΅ΠΊΡΡ:
img { float: left; margin: 0 10px 10px 0; }ΠΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ Β»
ΠΡΠΌΠ΅Π½Π° ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΡ
ΠΠ½ΠΎΠ³Π΄Π° ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎΠ±Ρ Π½Π° Π½Π΅Π³ΠΎ Π½Π΅ Π²Π»ΠΈΡΠ»ΠΈ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΠΏΠ΅ΡΠ΅Π΄ Π½ΠΈΠΌ. Π’Π°ΠΊΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ», ΠΊΠΎΡΠΎΡΡΠΉ Π² Π»ΡΠ±ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΠΎΠ΄ Π²ΡΠ΅ΠΌΠΈ ΠΎΡΡΠ°Π»ΡΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π²ΡΡΠΎΠΊΠΎΠ΅ Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠ΅ Ρ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠΎ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ΄Π½ΡΡΡΡΡ Π²Π²Π΅ΡΡ ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΠΏΡΠ°Π²Π° ΠΎΡ Π½Π΅Π³ΠΎ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Π° ΠΏΠΎΡΠ²ΠΈΡΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΡΡΠΎΠ²Π½Π΅ Ρ Π±ΠΎΠΊΠΎΠ²ΡΠΌ ΠΌΠ΅Π½Ρ. ΠΠ°Π½Π½Π°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΡΠ΅ΡΠ°Π΅ΡΡΡ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° clear, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΎΠΎΠ±ΡΠ°Π΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΡΡΠΈΠ»ΠΈΠ·ΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΉ.
ΠΠ»Ρ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π° clear ΠΌΠΎΠΆΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ:
- left — ΠΏΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π·Π°ΠΏΡΠ΅ΡΠ΅Π½Ρ Ρ Π»Π΅Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ.
- right — ΠΏΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π·Π°ΠΏΡΠ΅ΡΠ΅Π½Ρ Ρ ΠΏΡΠ°Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ.
- both — ΠΏΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π·Π°ΠΏΡΠ΅ΡΠ΅Π½Ρ Ρ ΠΎΠ±Π΅ΠΈΡ ΡΡΠΎΡΠΎΠ½.
- none — ΡΠ°Π·ΡΠ΅ΡΠ°Π΅Ρ Π½Π°Π»ΠΈΡΠΈΠ΅ ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ ΠΎΠ±Π΅ΠΈΡ ΡΡΠΎΡΠΎΠ½.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°</title> <style> div { width: 400px; } img { float: right; } p { clear: right; } </style> </head> <body> <div> <img src="logocss.gif"> <p>Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° clear ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ, ΡΡΠΎ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π·Π°ΠΏΡΠ΅ΡΠ΅Π½Ρ Ρ ΠΏΡΠ°Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ. Π’Π΅ΠΊΡΡ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠΉ Π½ΠΈΠΆΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ.</p> </div> </body> </html>
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ?
ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΊΠΎΠΌΠΏΠ°ΠΊΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π° ΠΈ ΡΠ²ΡΠ·ΡΠ²Π°Π½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΎΠ±ΠΎΠΉ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΉ ΠΈ ΡΠ΅ΠΊΡΡΠ°. Π‘Π°ΠΌΠΎ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΡΠΎΠ·Π΄Π°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΈΠ»Π΅Π²ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° float, Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌΠΎΠ³ΠΎ ΠΊ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ img. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ left Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ, rightΒ β ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ. ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΠΎ Π΄ΡΡΠ³ΠΈΠΌ, ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΡΠΌ ΡΡΠΎΡΠΎΠ½Π°ΠΌ.
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ 1 Π²Π²Π΅Π΄Π΅Π½Ρ Π΄Π²Π° ΡΡΠΈΠ»Π΅Π²ΡΡ ΠΊΠ»Π°ΡΡΠ° leftimg ΠΈ rightimg, ΠΏΡΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ ΠΈΡ ΠΊ <img> ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅ΡΡΡ ΠΏΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΉ ΡΡΠΎΡΠΎΠ½Π΅, Π° ΡΠ΅ΠΊΡΡ ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ.
ΠΡΠΈΠΌΠ΅Ρ 1. ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅</title> <style> .leftimg { float:left; /* ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ */ margin: 7px 7px 7px 0; /* ΠΡΡΡΡΠΏΡ Π²ΠΎΠΊΡΡΠ³ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ */ } .rightimg { float: right; /* ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ */ margin: 7px 0 7px 7px; /* ΠΡΡΡΡΠΏΡ Π²ΠΎΠΊΡΡΠ³ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ */ } </style> </head> <body> <h3>ΠΠΎΠΊΠ»Π°Π΄ Π»Π΅ΠΉΡΠ΅Π½Π°Π½ΡΠ° ΠΠΎΠΊΠ°ΡΡΠ΅Π²Π°</h3> <p><img src="image/n1.jpg" alt="ΠΠ΅ΠΉΡΠ΅Π½Π°Π½Ρ ΠΠΎΠΊΠ°ΡΡΠ΅Π²"> ΠΡΠ΅ΡΠ° Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΡΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ ΡΠ°Π·Π²Π΅Π΄ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΈ Π½Π°ΡΠ° Π³ΡΡΠΏΠΏΠ° ΠΏΠΎΠ΄Π²Π΅ΡΠ³Π»Π°ΡΡ Π½Π°ΠΏΠ°Π΄Π΅Π½ΠΈΡ Π½Π΅ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠΈΠ²Π½ΠΈΠΊΠ° Π² ΠΊΠ°ΠΌΡΡΠ»ΡΠΆΠ½ΠΎΠΉ ΡΠΎΡΠΌΠ΅ ΠΠ»ΠΈΠ΅Π½ΠΎΠ². Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΠΉ ΠΎΠ±ΠΎΡΠΎΠ½Ρ ΠΈ ΡΡΡΠ΅ΠΌΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΊΠΎΠ½ΡΡΠ°ΡΠ°ΠΊΠΈ ΠΌΠ½ΠΎΠ³ΠΎΡΠΈΡΠ»Π΅Π½Π½Π°Ρ Π³ΡΡΠΏΠΏΠ° Π±ΠΎΠ΅Π²ΠΈΠΊΠΎΠ² Π±ΡΠ»Π° ΡΠΌΡΡΠ° ΠΈ ΠΎΡΠ±ΡΠΎΡΠ΅Π½Π°. Π‘ΡΠ΅Π΄ΠΈ Π»ΠΈΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΡΠ°Π²Π° ΠΏΠΎΡΠ΅ΡΡ Π½Π΅Ρ. ΠΠΎΠΉΡΡ ΡΠ°Π·Π²Π΅Π΄Π³ΡΡΠΏΠΏΡ ΠΏΡΠΎΡΠ²ΠΈΠ»ΠΈ Π½Π΅Π΄ΡΠΆΠΈΠ΅ Π½Π°Π²ΡΠΊΠΈ Π²Π»Π°Π΄Π΅Π½ΠΈΡ ΠΎΡΡΠΆΠΈΠ΅ΠΌ. ΠΡΠΎΠ±ΠΎ ΠΎΡΠ»ΠΈΡΠΈΠ»ΡΡ Π² Π±ΠΎΡ Π²Π·Π²ΠΎΠ΄Π½ΡΠΉ ΠΡΠ΄ΡΡΡΡΠ² Π.Π., Π³ΡΠ°ΠΌΠΎΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π²ΡΠΈΠΉ ΡΠ΅Π»ΠΎΠ²Π΅ΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ΅ΡΡΡΡΡ ΡΠ²ΠΎΠ΅Π³ΠΎ Π²Π·Π²ΠΎΠ΄Π°. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΈ Π±ΡΠ»ΠΈ Π·Π°Ρ Π²Π°ΡΠ΅Π½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π½Π΅Π·Π΅ΠΌΠ½ΠΎΠΉ ΠΊΡΠ»ΡΡΡΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠ΅ΡΠ΅Π΄Π°Π½Ρ Π°Π½Π°Π»ΠΈΡΠΈΡΠ΅ΡΠΊΠΎΠΉ Π³ΡΡΠΏΠΏΠ΅.</p> <h3>ΠΡΠ΅ΡΡ-ΡΠ΅Π»ΠΈΠ· Π°Π½Π°Π»ΠΈΡΠΈΡΠ΅ΡΠΊΠΎΠΉ Π³ΡΡΠΏΠΏΡ</h3> <p><img src="image/n2.jpg" alt="Π£ΡΡΠ½ΡΠ΅, Π½Π°Ρ ΠΎΠ΄ΡΡΠΈΠ΅ΡΡ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Π°ΡΡΠ΅ΠΊΡΠ°"> Π Π½Π°ΡΠΈΡ ΡΠ΅ΠΊΡΠ΅ΡΠ½ΡΡ Π»Π°Π±ΠΎΡΠ°ΡΠΎΡΠΈΡΡ Π² ΡΠ°ΠΌΠΊΠ°Ρ ΠΏΡΠΎΠ΅ΠΊΡΠ° «ΠΠ°Π½Π΄ΠΎΡΠ°» ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°Π»ΠΎΡΡ ΠΏΡΠΈΡ ΠΎΡΡΠΎΠΏΠ½ΠΎΠ΅ ΠΎΡΡΠΆΠΈΠ΅. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π½Π΅ΡΠ΄Π°ΡΠ½ΠΎΠ³ΠΎ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ° Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΡΡΠ΅Π½ΡΡ , ΡΠ°Π±ΠΎΡΠ°Π²ΡΠΈΡ Π½Π°Π΄ ΠΏΡΠΈΠ±ΠΎΡΠΎΠΌ, ΠΏΠΎΠ΄Π²Π΅ΡΠ³Π»ΠΈΡΡ Π²ΠΎΠ·Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΏΡΠΈΡ ΠΎΡΡΠΎΠΏΠ½ΠΎΠ³ΠΎ ΠΈΠ·Π»ΡΡΠ΅Π½ΠΈΡ, ΠΈ ΠΎΠ½ΠΈ, Π½Π°Ρ ΠΎΠ΄ΡΡΡ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Π°ΡΡΠ΅ΠΊΡΠ°, ΡΠ°ΡΡΠ°ΡΠΈΠ»ΠΈ ΠΏΡΠΎΡΠΎΡΠΈΠΏ ΠΏΠΎ Π΄Π΅ΡΠ°Π»ΡΠΌ. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π½Π°ΡΠΈ ΡΡΡΠ½ΡΠ΅ Π΄ΠΎ ΡΠΈΡ ΠΏΠΎΡ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Π°ΡΡΠ΅ΠΊΡΠ°.</p> </body> </html>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ. 1.
Π ΠΈΡ. 1. Π’Π΅ΠΊΡΡ Ρ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΡΠΌΠΈ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° float Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ΅ΠΊΡΡ ΠΏΠ»ΠΎΡΠ½ΠΎ ΠΏΡΠΈΠ»Π΅Π³Π°ΡΡ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠΎΡΡΠΎΠΌΡ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²Π²Π΅Π΄ΡΠ½ΠΎ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ margin, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ ΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ. ΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ Π·Π°Π΄Π°ΡΡ ΠΎΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ Ρ, ΡΠΏΡΠ°Π²Π°, ΡΠ½ΠΈΠ·Ρ ΠΈ ΡΠ»Π΅Π²Π° ΠΎΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΉ.
ΠΠ²ΡΠΎΡ ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ
ΠΠ²ΡΠΎΡ: ΠΠ»Π°Π΄ ΠΠ΅ΡΠΆΠ΅Π²ΠΈΡ
ΠΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅: 25.09.2018
Π Π΅Π΄Π°ΠΊΡΠΎΡΡ: ΠΠ»Π°Π΄ ΠΠ΅ΡΠΆΠ΅Π²ΠΈΡ
ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° Π²ΠΎΠΊΡΡΠ³ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ HTML + CSS
Π ΡΡΠΎΠΉ ΡΠ΅ΠΌΠ΅ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° Π²ΠΎΠΊΡΡΠ³ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΏΠ»Π΅Π΅ΡΠ°, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ CSS. ΠΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π° ΠΈΠ»ΠΈ ΡΡΠ°ΡΡΠΈ, Π²Π΅Π± ΠΌΠ°ΡΡΠ΅Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π½Π° ΡΡΠΎΡ ΡΠ»ΡΡΠ°ΠΉ Π΅ΡΡΡ ΡΠ²ΠΎΠΈ ΠΏΠ»ΡΡΡ. ΠΡΠΎ Π½ΡΠ°Π²ΠΈΡΡΡ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΠΌ ΡΠΈΡΡΠ΅ΠΌΠ°ΠΌ, Π³Π΄Π΅ ΠΊ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΠΎΠΌΡ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. Π ΠΎΡ ΡΡΠ΄Π° Π²ΡΡΠ΅ΠΊΠ°Π΅Ρ Π°ΠΊΡΡΠ°Π»ΡΠ½Π°Ρ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΠΊΡΠ°ΡΠΈΠ²ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ. ΠΠ΄Π΅ Π½Π° ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ ΡΠΆΠ΅ Π±ΡΠ΄Π΅Ρ ΡΡΠΎΡΡΡ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅, ΠΈ Π·Π΄Π΅ΡΡ ΠΌΡ Π΄Π΅Π»Π°Π΅ΠΌ ΡΡΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΈ Π² ΡΠ΅ΠΌ ΡΠΎ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΠΎΠ΅ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΠΊΠ°ΡΠ°ΡΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΈ ΡΠ°ΠΌΠΎΠ³ΠΎ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅.ΠΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΡΠ°ΠΊΠΎΠΉ Π²ΠΈΠ΄ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π±Π»ΡΠ΄Π°ΡΡ Π² ΡΠ°ΠΌΠΎΠΌ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π΅, Π³Π΄Π΅ Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π² Π»Π΅Π²ΠΎΠΌ Π²Π΅ΡΡ Π½Π΅ΠΌ ΡΠ³Π»Ρ, Π° ΠΏΠΎ ΠΏΡΠ°Π²ΡΡ ΡΡΠΎΡΠΎΠ½Ρ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅, ΠΈ ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΎ Π΄ΠΎΡ ΠΎΠ΄ΠΈΡ Π΄ΠΎ ΡΠ°ΠΌΠΎΠ³ΠΎ Π½ΠΈΠ·Π° ΠΏΠΎΡΡΠ°Π²Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ½ΠΈΠΌΠΊΠ°, ΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅. Π§ΡΠΎΠ± ΠΎΠ½ΠΎ Π±ΡΠ»ΠΎ ΠΊΡΠ°ΡΠΈΠ²ΡΠΌ, Π·Π΄Π΅ΡΡ Π½ΡΠΆΠ½ΠΎ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π·Π°Π΄Π°ΡΡ ΠΎΡΡΡΡΠΏΡ, ΡΡΠΎΠ± ΠΎΠ½ΠΈ Π±ΡΠ»ΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ ΠΏΠΎ Π²ΡΠ΅ΠΌ ΡΡΠΎΡΠΎΠ½Π°ΠΌ, Π² Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°ΠΉ Π·Π°Π΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°Π½ΠΎ 2 ΡΡΠΎΡΠΎΠ½Ρ. Π§ΡΠΎ ΠΏΠΎ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ, ΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΡΠ°ΠΌΠΊΡ, Π³Π΄Π΅ Π΅ΡΠ»ΠΈ ΠΈΠ΄Π΅Ρ ΡΠ²Π΅ΡΠ»ΡΠΉ ΡΠΎΡΠΌΠ°Ρ, ΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ΅Π½Π΅ΠΉ, Π½ΠΎ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π½Π΅ ΡΡΠ΅ΡΠ΄ΡΡΠ²ΠΎΠ²Π°ΡΡ, ΡΠ°ΠΊ ΡΡΠΎΠ± ΠΎΠ½ΠΈ Π½Π΅ ΠΏΠΎΠΏΠ°Π΄Π°Π»ΠΈ ΠΎΠ½Π° Π·Π½Π°ΠΊΠΈ ΡΠ΅ΠΊΡΡΠ°.
ΠΡΠΈΡΡΡΠΏΠ°Π΅ΠΌ ΠΊ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅:
1. ΠΠ°ΡΠΈΠ°Π½Ρ
HTML
ΠΠΎΠ΄
<div>
Β Β <img src=»http://images.vfl.ru/ii/1536436495/77dfad6a/23251213.png» alt=»»/>
Β Β </div>
Β Β <p>
ΠΠ΄Π΅ΡΡ ΠΈΠ΄Π΅Ρ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π°.
Β Β </p>
CSS
ΠΠΎΠ΄
.wrapping-description {
Β Β float: left; /*Π²ΡΡΡΠ°Π²Π»ΡΠ΅ΠΌ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ */
Β Β margin:9px; /*Π΄Π΅Π»Π°Π΅ΠΌ Π²Π½Π΅ΡΠ½ΠΈΠΉ ΠΎΡΡΡΡΠΏ*/
Β Β display:inline; /* Π΄Π»Ρ IE6, ΡΡΠΎΠ± ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° Π½Π΅ ΡΠ΄Π²ΠΎΠΈΠ»ΡΡ */
Β Β }
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΠΌ Π½Π΅ ΡΠ΅Π³ΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎΠ³ΠΎ Π½Π΅Ρ, Π²ΡΠ΅ Π΄Π΅Π»Π°Π΅ΡΡΡ Π² ΡΡΠΈΠ»ΠΈΡΡΠΈΠΊΠ΅ CSS, Π³Π΄Π΅ Π·Π°Π΄Π°Π΅ΠΌ ΠΊΠ»Π°ΡΡ ΠΈ ΠΏΠΎΠ΄ Π½Π΅Π³ΠΎ ΠΈΠ΄Π΅Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠ°.
Π’Π°ΠΊΠΆΠ΅ Π΅ΡΡΡ ΠΏΠΎΡ ΠΎΠΆΠΈΠΉ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π», Π³Π΄Π΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΎΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ ΠΏΠΎΠ΄ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΡ.
2. ΠΠ°ΡΠΈΠ°Π½Ρ
CSS
ΠΠΎΠ΄
.wrapping-description {
Β Β float: left;
Β Β margin: 1px 9px 3px 0px;
Β Β border: 1px solid #969191;
Β Β padding: 6px;
}
ΠΠ΄Π΅ΡΡ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΠΎΡ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΌΠ΅ΡΠΎΠ΄Π° Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»ΡΡΠ΅ Π΅ΡΡΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΠΎΡΠ²Π΅ΡΠ°ΡΡ Π·Π° ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ΠΌ.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΏΠ»Π΅Π΅ΡΠ° ΡΠ΅ΠΊΡΡΠΎΠΌ
ΠΠ΅ΡΠΎΡΡΠ½ΠΎ Π²Π°ΠΌ ΠΏΠΎΠΏΠ°Π΄Π°Π»ΠΈΡΡ ΠΈ ΡΠ°ΠΊΠΈΠ΅ ΡΡΠ°ΡΡΠΈ, Π³Π΄Π΅ Π²ΠΌΠ΅ΡΡΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ΅Π» ΠΏΠ»Π΅Π΅Ρ, Π° ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ Π±ΡΠ»ΠΎ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΌ ΠΏΠΎ Π²ΠΈΠ΄Ρ. Π§ΡΠΎ ΠΊΠ°ΠΊ ΠΏΠΎΠ½ΡΠ»ΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, Π½ΠΎ ΡΠ°ΠΌ ΡΠΆΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎ Π΄ΡΡΠ³ΠΎΠΌΡ, ΡΡΠΎ ΡΠ°ΠΊΠΆΠ΅ Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ.
HTML
ΠΠΎΠ΄
<iframe src=»https://www.youtube.com/embed/TjtYXGTlBjo»></iframe>
<h3><a href=»#»>ZorNet.Ru — ΠΏΠΎΡΡΠ°Π» Π²Π΅Π±ΠΌΠ°ΡΡΠ΅ΡΠ°</a></h3>
<p>ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ΄ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π» </p>
CSS
ΠΠΎΠ΄
iframe{border:0;float:left;height:15em;margin-right:1.3em;width:28em}
ΠΠ΄Π΅ Π² Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅ ΡΡΠ°Π²ΠΈΠΌ ΠΎΡΡΡΡΠΏΡ, ΠΊΠ°ΠΊ Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ Ρ ΠΏΠ»Π΅Π΅ΡΠΎΠΌ
Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ Π·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ ΠΈΠ»ΠΈ ΡΠ΅ΠΊΡΡΡ, Π³Π΄Π΅ ΡΠ΄Π΅Π»Π°Π»ΠΈ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠ΅ ΠΈ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΠ΅ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠΎΠΌ Π² HTML, ΠΈ Π±Π΅Π·ΡΡΠ»ΠΎΠ²Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΡΠΎ ΠΈΠ΄ΡΡ Π² CSS.
ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠΎΠΌ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ Π² html-ΡΡΡΠ°Π½ΠΈΡΠΊΠ΅ Π²ΡΠ΅Π³Π΄Π° Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ²Π½ΠΎ ΠΈ Π½Π°Π³Π»ΡΠ΄Π½ΠΎ, ΠΏΠΎ-ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ ΡΠΎ ΡΠΏΠ»ΠΎΡΠ½ΡΠΌ ΡΠ΅ΠΊΡΡΠΎΠΌ.
ΠΡΡΠ°Π²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² html-ΡΠ΅ΠΊΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ ΠΈ Π² ΠΊΠ»Π°ΡΡΠΈΠΊΠ΅ ΡΡΠΈΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² 3:
- Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ
- ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠΎΠΌ
- ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΏΠΎΠ»Π΅
Β
ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ
ΠΠ»Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΡΠ΅ΠΊΡΡΠ°, ΠΏΡΠΎΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΡΠ΅Π³ <img> ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ <p>, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΡΠ°Π²ΠΈΡΡΡ Π°ΡΡΠΈΠ±ΡΡ align=Β»centerΒ». ΠΡΠ»ΠΈ ΠΎΠΆΠΈΠ΄Π°Π΅ΡΡΡ ΡΠ°ΡΡΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, ΡΠΎ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½Π΅Π΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ CSS ΡΡΠΈΠ»Ρ Π΄Π»Ρ ΡΠ΅Π³Π° <p>. ΠΠ°ΠΊ ΡΡΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ, ΡΠΌΠΎΡΡΠΈΡΠ΅ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ 1.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> Β <title>Π ΠΈΡΡΠ½ΠΎΠΊ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ</title> Β <style type="text/css"> Β P.cimg{ Β text-align: center; /* ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ */ Β } Β </style> Β </head> Β <body> Β <p> Β <img src="images/sample.gif" alt="ΠΠ»Π»ΡΡΡΡΠ°ΡΠΈΡ"> Β </p> Β </body> </html> |
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> Β <title>Π ΠΈΡΡΠ½ΠΎΠΊ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ</title> Β <style type=»text/css»> Β P.cimg{ Β text-align: center; /* ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ */ Β } Β </style> Β </head> Β <body> Β <p> Β <img src=»images/sample.gif» alt=»ΠΠ»Π»ΡΡΡΡΠ°ΡΠΈΡ»> Β </p> Β </body> </html>
Π Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΊ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ <p> Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ CSS-ΠΊΠ»Π°ΡΡ cimg, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ ΡΡΡΠΎΠΊΠΈ. Π’ΠΎ, ΠΊΠ°ΠΊ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΡΡ Π΅ΠΌΠ°ΡΠΈΡΠ½ΠΎ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ β ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΡΠΈΡΡΠ½ΠΊΠ΅ 1.
Π ΠΈΡ. 1. Π ΠΈΡΡΠ½ΠΎΠΊ Π² ΡΠ΅Π½ΡΡΠ΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΡΠ΅ΠΊΡΡΠ°
ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠΎΠΌ
ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠΎΠΌ β ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ°ΠΌΡΡ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π½Π΅Π½ΡΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² Π²Π΅ΡΡΡΠΊΠΈ HTML-ΡΡΡΠ°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΡΠ΅ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ. ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΠΏΡΠΈΠ΅ΠΌΠΎΠ² Π²Π΅ΡΡΡΠΊΠΈ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΠΏΠΎ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π° ΡΠ΅ΠΊΡΡ ΠΎΠ±Ρ ΠΎΠ΄ΠΈΡ Π΅Π³ΠΎ Ρ Π΄ΡΡΠ³ΠΈΡ ΡΡΠΎΡΠΎΠ½ (ΡΠΈΡ. 2). ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ², ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΡ ΠΊΠ°ΠΊ ΠΈ Π½Π° HTML ΡΠ°ΠΊ ΠΈ Π½Π° CSS.
Π ΠΈΡ. 2. Π ΠΈΡΡΠ½ΠΎΠΊ Π²ΡΡΠΎΠ²Π½Π΅Π½ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΡΡΡ ΡΠ΅ΠΊΡΡΠΎΠΌ ΡΠΏΡΠ°Π²Π°
ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΎΡΡΡΠ΅ΡΡΠ²ΠΈΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠΎΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΡΠΎ Ρ ΡΠ΅Π³Π° <img> Π΅ΡΡΡ Π°ΡΡΠΈΠ±ΡΡ align, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ ΠΈ ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠΏΠΎΡΠΎΠ± ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠΎΠΌ. ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ ΠΈ Π·Π°Π΄Π°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΡΠ»Π΅Π²Π°, Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ align=Β»rightΒ», Π΄Π»Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ ΠΈ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠΎΠΌ ΡΠΏΡΠ°Π²Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ align=Β»leftΒ». ΠΠ΄Π΅ΡΡ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°ΡΡΠΈΠ±ΡΡΡ ΡΠ΅Π³Π° <img> β vspace ΠΈ hspace, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π½Π° ΠΊΠ°ΠΊΠΎΠΌ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ ΡΠ΅ΠΊΡΡ Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ. ΠΠ΅Π· ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΡΡΠΈΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ² ΡΠ΅ΠΊΡΡ Π±ΡΠ΄Π΅Ρ Π²ΠΏΠ»ΠΎΡΠ½ΡΡ ΠΏΡΠΈΠ»Π΅Π³Π°ΡΡ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (ΠΏΡΠΈΠΌΠ΅Ρ 2).
ΠΡΠΈΠΌΠ΅Ρ 2. ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠΎΠΌ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Π ΠΈΡΡΠ½ΠΎΠΊ Π² ΡΠ΅ΠΊΡΡΠ΅</title> </head> <body> <p> <img src="images/sample.gif" alt="ΠΠ»Π»ΡΡΡΡΠ°ΡΠΈΡ" align="left" vspace="5" hspace="5"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> </body> </html> |
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Π ΠΈΡΡΠ½ΠΎΠΊ Π² ΡΠ΅ΠΊΡΡΠ΅</title> </head> <body> <p> <img src=»images/sample.gif» alt=»ΠΠ»Π»ΡΡΡΡΠ°ΡΠΈΡ» align=»left» vspace=»5″ hspace=»5″> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> </body> </html>
ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΡΡΠΈΠ»Π΅ΠΉ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ float. float:right β Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈ Π΄Π΅Π»Π°Π΅Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠΎΠΌ ΡΠ»Π΅Π²Π°, Π° float:left Π΄Π΅Π»Π°Π΅Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠΎΠΌ ΡΠΏΡΠ°Π²Π° ΠΎΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (ΠΏΡΠΈΠΌΠ΅Ρ 3).
ΠΡΠΈΠΌΠ΅Ρ 3. ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠΎΠΌ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Π ΠΈΡΡΠ½ΠΎΠΊ Π² ΡΠ΅ΠΊΡΡΠ΅</title> <style type="text/css"> IMG.cimg{ float: right; /* ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ */ padding-left: 10px; /* ΠΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° */ padding-bottom: 10px; /* ΠΡΡΡΡΠΏ ΡΠ½ΠΈΠ·Ρ */ } </style> </head> <body> <p> <img src="images/sample.gif" alt="ΠΠ»Π»ΡΡΡΡΠ°ΡΠΈΡ"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> </body> </html> |
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Π ΠΈΡΡΠ½ΠΎΠΊ Π² ΡΠ΅ΠΊΡΡΠ΅</title> <style type=»text/css»> IMG.cimg{ float: right; /* ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ */ padding-left: 10px; /* ΠΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° */ padding-bottom: 10px; /* ΠΡΡΡΡΠΏ ΡΠ½ΠΈΠ·Ρ */ } </style> </head> <body> <p> <img src=»images/sample.gif» alt=»ΠΠ»Π»ΡΡΡΡΠ°ΡΠΈΡ»> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> </body> </html>
ΠΠ΄Π΅ΡΡ ΠΊ ΡΠ΅Π³Ρ <img> Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΠΊΠ»Π°ΡΡ cimg, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ float:right, Π° ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ»Π΅Π²Π° ΠΈ ΡΠ½ΠΈΠ·Ρ Π·Π°Π΄Π°Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ padding-left:10px ΠΈ padding-bottom:10px.
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΠΏΠΎΠ»Π΅
ΠΡΠΈ ΡΠ°ΠΊΠΎΠΌ ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ. ΠΠ°Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°Π΅Ρ Π΄Π²ΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΡ ΡΡΡΡΠΊΡΡΡΡ, Π³Π΄Π΅ Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°, Π° Π²ΠΎ Π²ΡΠΎΡΠΎΠΉ β ΡΠ΅ΠΊΡΡ.
ΠΡΠΈ ΡΠ°ΠΊΠΎΠΉ ΡΡ Π΅ΠΌΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΡΠΏΡΠ°Π²Π° ΠΈΠ»ΠΈ ΡΠ»Π΅Π²Π° ΠΎΡ ΡΠ΅ΠΊΡΡΠ°, ΠΏΡΠΈΡΠ΅ΠΌ Π΅Π³ΠΎ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ. Π€Π°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΡΡΠΎ Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°Π΅Ρ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· Π½ΠΈΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΡΠΈΡΡΠ½ΠΎΠΊ, Π° Π² Π΄ΡΡΠ³ΠΎΠΉ ΡΠ΅ΠΊΡΡ (ΡΠΈΡΡΠ½ΠΎΠΊ 3).
Π ΠΈΡ. 3. Π Π°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΏΠΎΠ»Π΅ ΡΠ»Π΅Π²Π° ΠΎΡ ΡΠ΅ΠΊΡΡΠ°
Π― Π·Π½Π°Ρ Π΄Π²Π° ΡΠΏΠΎΡΠΎΠ±Π° ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ ΡΡΡΡΠΊΡΡΡΡ β Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML-ΡΠ΅Π³ΠΎΠ² <table> ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS-ΠΏΡΠ°Π²ΠΈΠ»Π° margin. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΈ Π΄Π²Π° ΡΠΏΠΎΡΠΎΠ±Π°:
Π’Π°Π±Π»ΠΈΡΡ: Π΄Π°Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ΄ΠΎΠ±Π΅Π½ ΡΠ΅ΠΌ, ΡΡΠΎ Π»Π΅Π³ΠΊΠΎ ΠΈ ΠΏΠΎΠ½ΡΡΠ½ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΡ ΡΡΡΡΠΊΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ΅Π΅ΠΊ. ΠΠ°Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ»Π΄ΡΠΊΡΠ»ΡΠ½ΡΠΌ ΠΈ Π΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π½Π΅ ΠΎΡΠΎΠ±ΠΎ ΠΏΡΠΈΠ²Π΅ΡΡΡΠ²ΡΠ΅ΡΡΡ Π² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΌ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. Π‘ΡΠΈΡΠ°Π΅ΡΡΡ ΡΡΠΎ Π΄Π°Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΈΠ·Π±ΡΡΠΎΡΠ΅Π½ ΠΈ ΡΠ»ΠΎΠΆΠ΅Π½ Π² ΠΏΡΠ°Π²ΠΊΠ΅. ΠΠΎ Π²ΡΠ΅ Π½ΠΎΠ²ΠΈΡΠΊΠΈ ΡΠ΅ΡΠ΅Π· Π½Π΅Π³ΠΎ ΠΏΡΠΎΡ ΠΎΠ΄ΡΡ. ΠΠ»Ρ ΡΠ°ΠΊΠΎΠΉ ΡΡΡΡΠΊΡΡΡΡ Π½Π°ΠΌ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΠ°Π±Π»ΠΈΡΠ° Ρ ΡΡΠ΅ΠΌΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ, Π² ΠΏΠ΅ΡΠ²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠ°ΠΌΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π² ΡΡΠ΅ΡΡΠ΅ΠΉ ΡΠ΅ΠΊΡΡ, Π° ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ ΠΌΡ ΡΠΊΠ°ΠΆΠ΅ΠΌ ΠΎΡΡΡΡΠΏ β Π²ΠΎ Π²ΡΠΎΡΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ΅. ΠΠΎΠΆΠ½ΠΎ ΠΎΠ±ΠΎΠΉΡΠΈΡΡ ΠΈ Π΄Π²ΡΠΌΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ, Π° ΠΎΡΡΡΡΠΏ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ΅ΡΠ΅Π· CSS-ΡΡΠΈΠ»ΠΈ ΠΈΠ»ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠ° width ΡΠ΅Π³Π° (ΠΏΡΠΈΠΌΠ΅Ρ 4).
ΠΡΠΈΠΌΠ΅Ρ 4. Π Π°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΠΏΠΎΠ»Π΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°Π±Π»ΠΈΡ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Π ΠΈΡΡΠ½ΠΎΠΊ Π½Π° ΠΏΠΎΠ»Π΅</title> <style type="text/css"> TD.leftcol{ width: 110px; /* Π¨ΠΈΡΠΈΠ½Π° Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Ρ ΡΠΈΡΡΠ½ΠΊΠΎΠΌ */ vertical-align: top; /* ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅ΡΡ Π½Π΅ΠΌΡ ΠΊΡΠ°Ρ */ } </style> </head> <body> <table cellspacing="0" cellpadding="0"> <tr> <td> <img src="images/igels.png" alt="ΠΡ Π½Π΅ ΠΏΠΎΠ²Π΅ΡΠΈΡΠ΅, Π½ΠΎ ΡΡΠΎ ΡΠΆΠΈΠΊ"> </td> <td valign="top"> ΠΠΆΠΈΠΊΠΈ Π·Π°ΡΠΈΡΠ΅Π½Ρ ΠΎΡ Π²Π½Π΅ΡΠ½Π΅ΠΉ Π°Π³ΡΠ΅ΡΡΠΈΠΈ ΠΊΠΎΠ»ΡΡΠΈΠΌ ΠΏΠ°Π½ΡΠΈΡΠ΅ΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΏΠ°ΡΠ°Π΅Ρ ΠΈΡ ΠΎΡ ΡΠ΅Ρ , ΠΊΡΠΎ Ρ ΠΎΡΠ΅Ρ ΠΏΠΎΠΆΠΈΠ²ΠΈΡΡΡΡ Π²ΠΊΡΡΠ½ΡΠΌ ΠΈ Π½Π΅ΠΆΠ½ΡΠΌ ΠΌΡΡΠΎΠΌ Π΅ΠΆΠ°. ΠΠΎ Π½Π΅ ΡΡΠΎΠΈΡ ΡΡΠΈΡΠ°ΡΡ ΡΡΠΎ ΠΆΠΈΠ²ΠΎΡΠ½ΠΎΠ΅ ΠΈ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π±Π΅Π·ΠΎΠ±ΠΈΠ΄Π½ΡΠΌ, Π²ΡΠ΅-ΡΠ°ΠΊΠΈ ΡΡΠΎ Ρ ΠΈΡΠ½ΠΈΠΊ. ΠΠ°, ΠΎΠ½ Π½Π΅ ΠΏΠΈΡΠ°Π΅ΡΡΡ Π²ΠΎΠ»ΠΊΠ°ΠΌΠΈ ΠΈ Π»ΠΈΡΠ°ΠΌΠΈ, Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ ΡΡΡΡΠΏΠ°Π΅Ρ ΠΈΠΌ Π² ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ . Π Π²ΠΎΡ Π·Π°ΠΊΡΡΠΈΡΡ ΡΠ΅ΡΠ²ΡΡΠΊΠΎΠΌ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Π·ΠΌΠ΅Π΅ΠΉ Π΅ΠΌΡ Π²ΠΏΠΎΠ»Π½Π΅ ΠΏΠΎΠ΄ ΡΠΈΠ»Ρ. </td> </tr> </table> </body> </html> |
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Π ΠΈΡΡΠ½ΠΎΠΊ Π½Π° ΠΏΠΎΠ»Π΅</title> <style type=»text/css»> TD.leftcol{ width: 110px; /* Π¨ΠΈΡΠΈΠ½Π° Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Ρ ΡΠΈΡΡΠ½ΠΊΠΎΠΌ */ vertical-align: top; /* ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅ΡΡ Π½Π΅ΠΌΡ ΠΊΡΠ°Ρ */ } </style> </head> <body> <table cellspacing=»0″ cellpadding=»0″> <tr> <td> <img src=»images/igels.png» alt=»ΠΡ Π½Π΅ ΠΏΠΎΠ²Π΅ΡΠΈΡΠ΅, Π½ΠΎ ΡΡΠΎ ΡΠΆΠΈΠΊ»> </td> <td valign=»top»> ΠΠΆΠΈΠΊΠΈ Π·Π°ΡΠΈΡΠ΅Π½Ρ ΠΎΡ Π²Π½Π΅ΡΠ½Π΅ΠΉ Π°Π³ΡΠ΅ΡΡΠΈΠΈ ΠΊΠΎΠ»ΡΡΠΈΠΌ ΠΏΠ°Π½ΡΠΈΡΠ΅ΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΏΠ°ΡΠ°Π΅Ρ ΠΈΡ ΠΎΡ ΡΠ΅Ρ , ΠΊΡΠΎ Ρ ΠΎΡΠ΅Ρ ΠΏΠΎΠΆΠΈΠ²ΠΈΡΡΡΡ Π²ΠΊΡΡΠ½ΡΠΌ ΠΈ Π½Π΅ΠΆΠ½ΡΠΌ ΠΌΡΡΠΎΠΌ Π΅ΠΆΠ°. ΠΠΎ Π½Π΅ ΡΡΠΎΠΈΡ ΡΡΠΈΡΠ°ΡΡ ΡΡΠΎ ΠΆΠΈΠ²ΠΎΡΠ½ΠΎΠ΅ ΠΈ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π±Π΅Π·ΠΎΠ±ΠΈΠ΄Π½ΡΠΌ, Π²ΡΠ΅-ΡΠ°ΠΊΠΈ ΡΡΠΎ Ρ ΠΈΡΠ½ΠΈΠΊ. ΠΠ°, ΠΎΠ½ Π½Π΅ ΠΏΠΈΡΠ°Π΅ΡΡΡ Π²ΠΎΠ»ΠΊΠ°ΠΌΠΈ ΠΈ Π»ΠΈΡΠ°ΠΌΠΈ, Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ ΡΡΡΡΠΏΠ°Π΅Ρ ΠΈΠΌ Π² ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ . Π Π²ΠΎΡ Π·Π°ΠΊΡΡΠΈΡΡ ΡΠ΅ΡΠ²ΡΡΠΊΠΎΠΌ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Π·ΠΌΠ΅Π΅ΠΉ Π΅ΠΌΡ Π²ΠΏΠΎΠ»Π½Π΅ ΠΏΠΎΠ΄ ΡΠΈΠ»Ρ. </td> </tr> </table> </body> </html>
ΡΠΎ, ΡΡΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡΡ Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΡΠΈΡΡΠ½ΠΊΠ΅ 4.
Π ΠΈΡ. 4. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΠΏΠΎΠ»Π΅ ΡΠ»Π΅Π²Π° ΠΎΡ ΡΠ΅ΠΊΡΡΠ°
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ 4 ΡΠΈΡΠΈΠ½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 90 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π° ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Π³Π΄Π΅ ΠΎΠ½ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ β 110 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Π Π°Π·Π½ΠΈΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ Π½Π°ΠΌ Π½ΡΠΆΠ½ΡΠΉ ΠΎΡΡΡΡΠΏ ΠΎΡ ΡΠ΅ΠΊΡΡΠ° Π΄ΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ. Π§ΡΠΎΠ±Ρ Π°ΡΡΠΈΠ±ΡΡΡ ΡΠ°Π±Π»ΠΈΡΡ cellspacing ΠΈ cellpadding Π½Π΅ Π²ΠΌΠ΅ΡΠΈΠ²Π°Π»ΠΈΡΡ Π² ΠΏΡΠΎΡΠ΅ΡΡ, ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π»ΡΡΡΠ΅ ΠΎΠ±Π½ΡΠ»ΠΈΡΡ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π² ΡΡΠ΅ΠΉΠΊΠ°Ρ Π·Π°Π΄Π°Π΅ΡΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅ β vertical-align: top.
CSS-ΡΡΠΈΠ»ΠΈ: ΠΠ°Π½Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»Π΅Π½ ΠΈ ΠΎΠΏΡΠΈΠΌΠ°Π»Π΅Π½. ΠΠ΄Π΅ΡΡ Π½Π°ΠΌ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π΄Π²Π° ΡΠ»ΠΎΡ <div>, ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΊΠΎΡΠΎΡΡΡ ΠΌΡ ΡΠΊΠ°ΠΆΠ΅ΠΌ ΡΠ΅ΡΠ΅Π· CSS. Π ΠΎΠ΄Π½ΠΎΠΌ ΡΠ»ΠΎΠ΅ Π±ΡΠ΄Π΅Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π° Π² Π΄ΡΡΠ³ΠΎΠΌ ΡΠ΅ΠΊΡΡ. ΠΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΡΠΌΠΎΡΡΠΈΡΠ΅ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ 5:
ΠΡΠΈΠΌΠ΅Ρ 5. Π Π°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΠΏΠΎΠ»Π΅ Ρ ΡΠ»ΠΎΠ΅Π² ΠΈ CSS-ΡΡΠΈΠ»Π΅ΠΉ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Π ΠΈΡΡΠ½ΠΎΠΊ Π½Π° ΠΏΠΎΠ»Π΅</title> <style type="text/css"> #pic{ float: left; /* ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ */ } #text{ margin-left: 110px; /* ΠΡΡΡΡΠΏ ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ */ } </style> </head> <body> <div> <img src="images/igels.png" alt="ΠΡ Π½Π΅ ΠΏΠΎΠ²Π΅ΡΠΈΡΠ΅, Π½ΠΎ ΡΡΠΎ ΡΠΆΠΈΠΊ"> </div> <div> ΠΠΆΠΈΠΊΠΈ Π·Π°ΡΠΈΡΠ΅Π½Ρ ΠΎΡ Π²Π½Π΅ΡΠ½Π΅ΠΉ Π°Π³ΡΠ΅ΡΡΠΈΠΈ ΠΊΠΎΠ»ΡΡΠΈΠΌ ΠΏΠ°Π½ΡΠΈΡΠ΅ΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΏΠ°ΡΠ°Π΅Ρ ΠΈΡ ΠΎΡ ΡΠ΅Ρ , ΠΊΡΠΎ Ρ ΠΎΡΠ΅Ρ ΠΏΠΎΠΆΠΈΠ²ΠΈΡΡΡΡ Π²ΠΊΡΡΠ½ΡΠΌ ΠΈ Π½Π΅ΠΆΠ½ΡΠΌ ΠΌΡΡΠΎΠΌ Π΅ΠΆΠ°. ΠΠΎ Π½Π΅ ΡΡΠΎΠΈΡ ΡΡΠΈΡΠ°ΡΡ ΡΡΠΎ ΠΆΠΈΠ²ΠΎΡΠ½ΠΎΠ΅ ΠΈ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π±Π΅Π·ΠΎΠ±ΠΈΠ΄Π½ΡΠΌ, Π²ΡΠ΅-ΡΠ°ΠΊΠΈ ΡΡΠΎ Ρ ΠΈΡΠ½ΠΈΠΊ. ΠΠ°, ΠΎΠ½ Π½Π΅ ΠΏΠΈΡΠ°Π΅ΡΡΡ Π²ΠΎΠ»ΠΊΠ°ΠΌΠΈ ΠΈ Π»ΠΈΡΠ°ΠΌΠΈ, Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ ΡΡΡΡΠΏΠ°Π΅Ρ ΠΈΠΌ Π² ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ . Π Π²ΠΎΡ Π·Π°ΠΊΡΡΠΈΡΡ ΡΠ΅ΡΠ²ΡΡΠΊΠΎΠΌ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Π·ΠΌΠ΅Π΅ΠΉ Π΅ΠΌΡ Π²ΠΏΠΎΠ»Π½Π΅ ΠΏΠΎΠ΄ ΡΠΈΠ»Ρ. </div> </body> </html></code> |
<code><!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Π ΠΈΡΡΠ½ΠΎΠΊ Π½Π° ΠΏΠΎΠ»Π΅</title> <style type=»text/css»> #pic{ float: left; /* ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ */ } #text{ margin-left: 110px; /* ΠΡΡΡΡΠΏ ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ */ } </style> </head> <body> <div> <img src=»images/igels.png» alt=»ΠΡ Π½Π΅ ΠΏΠΎΠ²Π΅ΡΠΈΡΠ΅, Π½ΠΎ ΡΡΠΎ ΡΠΆΠΈΠΊ»> </div> <div> ΠΠΆΠΈΠΊΠΈ Π·Π°ΡΠΈΡΠ΅Π½Ρ ΠΎΡ Π²Π½Π΅ΡΠ½Π΅ΠΉ Π°Π³ΡΠ΅ΡΡΠΈΠΈ ΠΊΠΎΠ»ΡΡΠΈΠΌ ΠΏΠ°Π½ΡΠΈΡΠ΅ΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΏΠ°ΡΠ°Π΅Ρ ΠΈΡ ΠΎΡ ΡΠ΅Ρ , ΠΊΡΠΎ Ρ ΠΎΡΠ΅Ρ ΠΏΠΎΠΆΠΈΠ²ΠΈΡΡΡΡ Π²ΠΊΡΡΠ½ΡΠΌ ΠΈ Π½Π΅ΠΆΠ½ΡΠΌ ΠΌΡΡΠΎΠΌ Π΅ΠΆΠ°. ΠΠΎ Π½Π΅ ΡΡΠΎΠΈΡ ΡΡΠΈΡΠ°ΡΡ ΡΡΠΎ ΠΆΠΈΠ²ΠΎΡΠ½ΠΎΠ΅ ΠΈ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π±Π΅Π·ΠΎΠ±ΠΈΠ΄Π½ΡΠΌ, Π²ΡΠ΅-ΡΠ°ΠΊΠΈ ΡΡΠΎ Ρ ΠΈΡΠ½ΠΈΠΊ. ΠΠ°, ΠΎΠ½ Π½Π΅ ΠΏΠΈΡΠ°Π΅ΡΡΡ Π²ΠΎΠ»ΠΊΠ°ΠΌΠΈ ΠΈ Π»ΠΈΡΠ°ΠΌΠΈ, Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ ΡΡΡΡΠΏΠ°Π΅Ρ ΠΈΠΌ Π² ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ . Π Π²ΠΎΡ Π·Π°ΠΊΡΡΠΈΡΡ ΡΠ΅ΡΠ²ΡΡΠΊΠΎΠΌ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Π·ΠΌΠ΅Π΅ΠΉ Π΅ΠΌΡ Π²ΠΏΠΎΠ»Π½Π΅ ΠΏΠΎΠ΄ ΡΠΈΠ»Ρ. </div> </body> </html></code>
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ float:left Π΄Π»Ρ ΡΠ»ΠΎΡ #pic Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ ΠΏΡΠΈΠΌΡΠΊΠ°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, Π° Π²Π΅ΡΡ Π½ΡΡ ΡΡΡΠΎΠΊΠ° ΡΠ΅ΠΊΡΡΠ° ΡΠΎΠ²ΠΏΠ°Π΄Π°Π»Π° Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΡΡΠΎΠΊΠΎΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ΅Π· ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ»ΠΎΠΉ #text ΠΎΠΏΡΡΠΊΠ°Π΅ΡΡΡ Π²Π½ΠΈΠ· Π½Π° Π²ΡΡΠΎΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π’Π°ΠΊΠΆΠ΅ Π΄Π»Ρ ΡΠ»ΠΎΡ #text ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° margin-left:110px Π½Π° ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ 110 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΡΡΠΎΠ±Ρ ΡΠ°ΠΌ ΡΠ΅ΠΊΡΡ Π½Π΅ Π½Π°Π»Π°Π·ΠΈΠ» Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½ΡΠΆΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π² ΠΏΡΠ°Π²ΠΎΠΌ ΠΏΠΎΠ»Π΅, ΡΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ float:right Π΄Π»Ρ #pic ΠΈ margin-right:110px Π΄Π»Ρ #text.
P.S.: Π‘ΠΎΠ³Π»Π°ΡΠ½ΠΎ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ HTML4 ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠΎΠΌΠ΅ΡΠ°ΡΡΡΡ Π²Π½ΡΡΡΠΈ Π±Π»ΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ div ΠΈΠ»ΠΈ p.
ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ html. ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ html ΠΈ css
Π‘Π²Π΅ΡΡΡΠ°ΡΡ Π±Π»ΠΎΠΊ, ΡΠΎΡΡΠΎΡΡΠΈΠΉ ΠΈΠ· ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΈ ΡΠ΅ΠΊΡΡΠ°, ΠΏΡΠΈΡΠ΅ΠΌ ΡΠ΅ΠΊΡΡ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ.
Π‘Π»Π΅Π²Π° ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ, ΡΠΏΡΠ°Π²Π° β Π½Π΅Ρ
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΡΠ»ΠΎΠ²ΠΈΠ΅: ΡΠΈΡΠΈΠ½Π° Π½ΠΈ ΡΠ΅ΠΊΡΡΠ°, Π½ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΡΡΠΎΠ³ΠΎ Π½Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π°. ΠΡΠΈ ΠΎΡΡΡΡΡΡΠ²ΠΈΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ΅ΠΊΡΡ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π²ΡΡ ΠΎΡΠ²Π΅Π΄Π΅Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ.
Π Π΅ΡΠ΅Π½ΠΈΠ΅
Π’Π΅ΠΊΡΡΠΎΠ²ΡΠΉ Π±Π»ΠΎΠΊ
ΠΡΠΎΠ±ΡΠ΅ΠΌ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΡΡΠΈΠ»ΠΈ. Π‘ Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΎΠΉ Π²ΡΠ΅ ΡΡΠ½ΠΎ:
Photo { float: left; /* Π·Π°Π΄Π°Π΅ΠΌ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ */ margin:10px; /* ΠΎΡΡΡΡΠΏ Π΄Π»Ρ ΠΊΡΠ°ΡΠΎΡΡ */ display:inline; /* Π΄Π»Ρ IE6, ΡΡΠΎΠ± ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° Π½Π΅ ΡΠ΄Π²ΠΎΠΈΠ»ΡΡ */ }
Π’Π΅ΠΏΠ΅ΡΡ ΡΠΈΡΡΠ½ΠΎΠΊ ΡΡΠ°Π» ΡΠ»Π΅Π²Π°, Π° ΡΠ΅ΠΊΡΡ ΠΎΠ±ΠΎΡΠ΅Π» Π΅Π³ΠΎ ΡΠΏΡΠ°Π²Π°. ΠΠΎ Π΅ΡΠ»ΠΈ ΡΠ΅ΠΊΡΡΠ° Π±ΠΎΠ»ΡΡΠ΅, ΠΎΠ½ Π±ΡΠ΄Π΅Ρ Β«ΠΏΠΎΠ΄Π½ΡΡΠΈΠ²Π°ΡΡΒ» ΠΏΠΎΠ΄ ΡΠΈΡΡΠ½ΠΎΠΊ (ΡΠΌ. ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π²ΡΡΠ΅), Π° ΡΡΠΎΠ³ΠΎ-ΡΠΎ Π½Π°ΠΌ ΠΈ Π½Π΅ Π½ΡΠΆΠ½ΠΎ.
ΠΠ΅ΡΠ²ΠΎΠ΅, ΡΡΠΎ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡ Π² Π³ΠΎΠ»ΠΎΠ²Ρ β Β«Π·Π°ΡΠ»ΠΎΠ°ΡΠΈΡΡΒ» ΠΈ ΡΠ΅ΠΊΡΡ. ΠΠΎ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ Π½Π΅ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠ΅ΠΊΡΡ ΡΠΏΠ°Π΄Π΅Ρ ΠΏΠΎΠ΄ ΡΠΈΡΡΠ½ΠΎΠΊ!
float:left/right Π±ΡΠ΄Π΅Ρ ΡΡΠ΅Π±ΠΎΠ²Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ β ΠΈΠ½Π°ΡΠ΅ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΠΏΠΎΠ»ΡΡΠΈΡΡΡΡ!
ΠΡΠΌΠ°Π΅ΠΌ Π΄Π°Π»ΡΡΠ΅β¦ Π₯ΠΎΡΠΎΡΠΈΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ.description{ : XXXpx}. ΠΠ΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ, Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠΈΡΡΠ°ΡΠΈΡΡ ΡΠ°ΠΊΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ ΠΏΡΠΎΡ ΠΎΠ΄ΠΈΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π²ΡΠ΅-ΡΠ°ΠΊΠΈ Π·Π°Π΄Π°Π½. ΠΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΡΡΠΎ ΡΠ΅Π·ΠΈΠ½ΠΎΠ²ΡΠΉ Π±Π»ΠΎΠΊ Π½ΠΎΠ²ΠΎΡΡΠ΅ΠΉ. ΠΠ°ΡΡΠΈΠ½ΠΊΠ° Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠΈΡΠ΅, ΡΠΊΠ°ΠΆΠ΅ΠΌ 200px, Π° ΡΠΆΠ΅ ΡΠ΅ΠΊΡΡ ΡΡΠ½Π΅ΡΡΡ ΠΈ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π²ΡΡ ΠΎΡΡΠ°Π²ΡΡΡΡΡ ΡΠΈΡΠΈΠ½Ρ.
Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Ρ ΡΠ°ΠΊΠΎΠ³ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠ° Π΅ΡΡΡ ΡΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠΉ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΠΊ. ΠΡΠ»ΠΈ Π±Π»ΠΎΠΊΠ° Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ Π½Π΅ Π±ΡΠ΄Π΅Ρ, ΠΎΡΡΡΡΠΏ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ ΠΎΡΡΠ°Π½Π΅ΡΡΡ Π½Π΅Π»Π΅ΠΏΠΎΠΉ Π΄ΡΡΠΊΠΎΠΉ. ΠΠΎΠ½Π΅ΡΠ½ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ Π΅Π³ΠΎ ΡΠ±ΡΠ°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° ΡΠ΅ΡΡΡΠΈΠ½ΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠ°ΠΊ ΡΠ°ΡΡΠΊΠ°Π·Π°Π½ΠΎ Π² ΡΡΠ°ΡΡΠ΅ , Π½ΠΎ Π² Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ Π΅ΡΡΡ Π΄ΡΡΠ³ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅.
ΠΠ°ΠΏΡΠ΅ΡΠΈΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠ² :hidden; Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ. Π’Π΅ΠΌ ΡΠ°ΠΌΡΠΌ ΠΌΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ Π΄Π»Ρ Π½Π΅Π΅ Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ (ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΡΡΠ° ΡΠ΅ΠΌΠ° ΡΠΊΠΎΡΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΊΡΡΡΠ°).
ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΉ Π±ΡΠ°ΡΠ·Π΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΠ΅Π°Π³ΠΈΡΡΠ΅Ρ Π½Π° ΡΡΠΎ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ β ΡΡΠΎ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ IE6. Π‘ΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ Π΄Π»Ρ Π½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ , Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Β«ΡΠ»ΠΎΠ°ΡΠΈΠΌΒ» (ΡΠΈΡΠΈΠ½Ρ ΠΏΡΠΈ ΡΡΠΎΠΌ Π·Π°Π΄Π°Π²Π°ΡΡ Π½Π΅ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ).
ΠΡΠ°ΠΊ, ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΡΡΠ°Π²Π»Π΅Π½Π½ΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊ:
Photo { float: left; /* Π·Π°Π΄Π°Π΅ΠΌ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ */ margin:10px; /* ΠΎΡΡΡΡΠΏ Π΄Π»Ρ ΠΊΡΠ°ΡΠΎΡΡ */ display:inline; /* Π΄Π»Ρ IE6, ΡΡΠΎΠ± ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° Π½Π΅ ΡΠ΄Π²ΠΎΠΈΠ»ΡΡ */ } .description{ overflow:hidden; } * html .description{ float:left; }
ΠΠ°ΠΊ Π²ΡΠ΅Π³Π΄Π°, Π² Π±ΠΎΠ΅Π²ΡΡ ΡΡΠ»ΠΎΠ²ΠΈΡΡ Π²ΠΌΠ΅ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ .
ΠΠ°Π»ΠΈΡΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ°Ρ ΡΠ»ΡΡΡΠ°Π΅Ρ ΠΈΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄, ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠΏΠΎΡΠΎΠ±ΡΡΠ²ΡΠ΅Ρ Π»ΡΡΡΠ΅ΠΌΡ Π²ΠΎΡΠΏΡΠΈΡΡΠΈΡ ΡΠ΅ΠΊΡΡΠΎΠ². ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ html ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ²ΡΠ·Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Ρ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΡΠΌΠΈ ΠΈ ΡΠ°ΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π». ΠΠΎΡΡΠΎΡΠ½Π½ΠΎ ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡΡΡ Π½ΠΎΠ²ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠ΅ Π²ΠΎΠΏΠ»ΠΎΡΠ°ΡΡ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΈΠ΅ ΠΈΠ΄Π΅ΠΈ. ΠΡΠΈ ΡΡΠΎΠΌ Π½ΠΎΠ²ΡΠ΅ ΡΡΠΈΠ»ΠΈ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² ΠΎΡΠ½ΠΎΠ²Π°Π½Ρ Π½Π° ΠΎΠ΄Π½ΠΈΡ ΠΈ ΡΠ΅Ρ ΠΆΠ΅ ΡΠΏΠΎΡΠΎΠ±Π°Ρ , ΡΠΎΠ·Π΄Π°ΡΡΠΈΡ Π±Π΅Π·Π³ΡΠ°Π½ΠΈΡΠ½ΡΠΉ ΠΏΡΠΎΡΡΠΎΡ ΡΠ°Π½ΡΠ°Π·ΠΈΠΈ.
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΠΊΡΡΠ° ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡΡ Π² html ΠΈΠ»ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² CSS.
Π’Π΅Π³ΠΈ html: ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ
ΠΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΡΠ΅ΠΌΡ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ:
- ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅;
- ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠΎΠΌ;
- Π²ΡΡΠ°Π²ΠΊΠ° Π² ΠΏΠΎΠ»Π΅.
ΠΡΠΈ Π±ΠΎΠ»ΡΡΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡ ΠΏΠΎΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π΅ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠ½Π°ΡΠ°Π»Π° ΠΏΠΎΠΌΠ΅ΡΡΠΈΠ² Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΠ΅Π³Π° img, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ Π΄Π»Ρ Π½Π΅Π³ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ Π°ΡΡΠΈΠ±ΡΡ align=»center». ΠΡΠ»ΠΈ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΡΠΈΠ»Ρ CSS ΠΊ ΡΠ΅Π³Ρ .
ΠΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ΅, ΡΡΠ΄ΠΎΠΌ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡ ΡΠ΅ΠΊΡΡ. Π‘ΠΏΠΎΡΠΎΠ± ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΌ. ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠΎΠΌ Π΄Π΅Π»Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ. ΠΠΎ ΡΠ½Π°ΡΠ°Π»Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π½ΡΠΆΠ½ΠΎ Π²ΡΠ²Π΅ΡΡΠΈ Π½Π° ΡΠΊΡΠ°Π½. ΠΡΠ»ΠΈ ΠΊ Π½Π΅ΠΉ ΠΈΠ·Π²Π΅ΡΡΠ΅Π½ ΠΏΡΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, «foto1.jpg», Π΅Π΅ Π²ΡΡΠ°Π²Π»ΡΡΡ Π½Π° html ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ Π·Π°ΠΏΠΈΡΠΈ:
ΠΡΠΈΠΌΠ΅Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΠ»ΡΡΠ°Ρ, ΠΊΠΎΠ³Π΄Π° ΡΠ°ΠΉΠ»Ρ html ΠΈ ΡΠΈΡΡΠ½ΠΊΠ° Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅.
ΠΡΠ»ΠΈ Π·Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠ΅ΠΊΡΡ, ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½ΠΈΠΆΠ΅. ΠΡΠΎ Π½Π΅ Π²ΡΠ΅Π³Π΄Π° ΡΠ΄ΠΎΠ±Π½ΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΏΠΎ Π±ΠΎΠΊΠ°ΠΌ Π±ΡΠ΄ΡΡ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ ΠΏΡΡΡΡΠ΅ ΠΌΠ΅ΡΡΠ°, ΠΠΎΡΡΠΎΠΌΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΎΡΠΎΡΠΌΠ»ΡΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ html. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Ρ ΡΠ΅Π³Π° img ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π°ΡΡΠΈΠ±ΡΡ align, Π·Π°Π΄Π°ΡΡΠΈΠΉ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΡΠΎ ΠΈΠ»ΠΈ ΡΠΈΡΡΠ½ΠΊΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΠΊΡΡΠ°. ΠΡ ΡΡΠΎΠ³ΠΎ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° Π·Π°Π²ΠΈΡΠΈΡ, Ρ ΠΊΠ°ΠΊΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π» ΠΈ ΠΊΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π΅Π³ΠΎ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅Ρ ΡΠ΅ΠΊΡΡ.
ΠΡΡΠΈΠ±ΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
- left — ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π²Π»Π΅Π²ΠΎ ΠΏΡΠΈ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ ΡΠΏΡΠ°Π²Π°;
- right — ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ»Π΅Π²Π° ΠΏΡΠΈ Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ ΡΠΏΡΠ°Π²Π°;
- bottom — Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΡΠ»Π΅Π²Π°, ΠΏΠ΅ΡΠ²Π°Ρ ΡΡΡΠΎΠΊΠ° ΡΠ΅ΠΊΡΡΠ° Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Π½Π° ΡΡΠΎΠ²Π½Π΅ Π½ΠΈΠΆΠ½Π΅ΠΉ Π΅Π΅ ΡΠ°ΡΡΠΈ;
- top — ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, Π½ΠΎ ΠΏΠ΅ΡΠ²Π°Ρ ΡΡΡΠΎΠΊΠ° ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π° ΠΏΠΎ Π΅Π³ΠΎ Π²Π΅ΡΡ Π½Π΅ΠΌΡ ΡΡΠΎΠ²Π½Ρ;
- middle — Π½Π°ΡΠ°Π»ΡΠ½Π°Ρ ΡΡΡΠΎΡΠΊΠ° ΡΠ΅ΠΊΡΡΠ° ΠΏΡΠΎΡ ΠΎΠ΄ΠΈΡ Π½Π°ΠΏΡΠΎΡΠΈΠ² ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π£ ΡΠ΅Π³Π° img Π΅ΡΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ, ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΡ ΡΠ΅ΠΊΡΡΠ° Π΄ΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ (hspace ΠΈ vspace). ΠΠ΅Π· ΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΊ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ Π²ΠΏΠ»ΠΎΡΠ½ΡΡ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π²ΡΠ±ΠΈΡΠ°ΡΡΡΡ Π³Π°Π±Π°ΡΠΈΡΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΈΡΡΠ½ΠΊΠ° width ΠΈ height. ΠΡΠΈ ΡΡΠΎΠΌ Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠΎΠ±Π»ΡΠ΄Π°ΡΡΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΈ Π²ΡΡΠΎΡΠΎΠΉ. ΠΡΠ»ΠΈ Π³Π°Π±Π°ΡΠΈΡΡ Π½Π΅ Π·Π°Π΄Π°Π²Π°ΡΡ, ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠΈΡΡΠ½ΠΎΠΊ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΈΡΡΡ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠ°, ΡΡΠΎ Π½Π΅ Π²ΡΠ΅Π³Π΄Π° ΡΠ΄ΠΎΠ±Π½ΠΎ.
ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ Ρ Π΅Π³ΠΎ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ΠΌ ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π·Π°ΠΏΠΈΡΠΈ:
Π’Π΅ΠΊΡΡ
ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π±Π»ΠΈΡ
ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ html Π»Π΅Π³ΠΊΠΎ Π΄Π΅Π»Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°Π±Π»ΠΈΡΡ, Π²Π½ΡΡΡΠΈ ΡΡΠ΅ΠΉΠΊΠΈ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠ΄Π΅ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ align ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠ΅Π³Π° table. Π’Π°Π±Π»ΠΈΡΡ ΠΈΠΌΠ΅ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ², ΡΡΠΎ ΡΠΎΠ·Π΄Π°Π΅Ρ Π΄Π»Ρ Π½ΠΈΡ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°:
ΠΡΠ°Π½ΠΈΡΠ° ΡΠ°Π±Π»ΠΈΡΡ Π΄Π΅Π»Π°Π΅ΡΡΡ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ ΠΈ Π½Π΅
ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ html ΠΈ css
ΠΡΠ΅ΠΌ ΠΏΡΠΈΠ²Π΅Ρ. Π ΠΏΡΠΎΡΠ»ΡΡ ΡΡΠΎΠΊΠ°Ρ ΠΌΡ Π½Π°ΡΡΠΈΠ»ΠΈΡΡ Π²ΡΡΠ°Π²Π»ΡΡΡ Π² ΡΠ΅ΠΊΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΈ Π΄Π΅Π»Π°ΡΡ ΠΈΠ· ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ ΡΡΡΠ»ΠΊΠΈ. ΠΠ΄Π½Π°ΠΊΠΎ, Π½Π΅ΡΠ΅ΡΠ΅Π½Π½ΠΎΠΉ ΠΎΡΡΠ°Π»Π°ΡΡ ΠΎΠ΄Π½Π° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°. ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΈΡΠ° Π²ΡΠ³Π»ΡΠ΄Π΅Π»Π° ΠΊΡΠ°ΡΠΈΠ²ΠΎ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎ, ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡΡΡ ΡΠ΅ΠΊΡΡΠΎΠΌ. Π Π΅ΡΠΈΡΡ ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ html ΠΈ css ΠΌΡ ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ.
ΠΠ°ΠΊ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ html.
ΠΠ°ΠΊ ΠΌΡ ΠΏΠΎΠΌΠ½ΠΈΠΌ, ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π² ΡΠ΅ΠΊΡΡ Π²ΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
<img src=βhttp://site2.ru/files/image.jpgβ />
ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠΆΠ°ΡΡ Π΅Π΅ ΠΊ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈ Π·Π°ΡΡΠ°Π²ΠΈΡΡ ΡΠ΅ΠΊΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ Π΅Π΅ ΡΠΏΡΠ°Π²Π° ΠΌΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π² ΠΊΠΎΠ΄ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ:
<img src=βhttp://site2.ru/files/image.jpgβ align=Β»leftΒ»/>
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, Π·Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ Β«ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅Β» Π΅Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π°ΡΡΠΈΠ±ΡΡ align. ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠΆΠ°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΊ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ ΠΈ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎΠ±Ρ ΡΠ΅ΠΊΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°Π» Π΅Π΅ ΡΠ»Π΅Π²Π° Π½ΡΠΆΠ½ΠΎ Π²ΡΡΡΠ°Π²ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΠ³ΠΎ Π°ΡΡΠΈΠ±ΡΡΠ°:
align=Β»rightΒ»
ΠΡΡΠ°ΡΠΈ ΡΠ°Π· ΡΠΆ ΠΌΡ ΠΊΠΎΡΠ½ΡΠ»ΠΈΡΡ ΡΠ΅ΠΊΡΡΠ°, ΡΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ ΡΡΠ°ΡΡΡ html ΡΠ΅Π³ΠΈ Π΄Π»Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ°.
ΠΠ°ΠΊ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ css.
ΠΠ°Π½Π½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠ΅Π΄ΠΊΠΎ Π·Π°Π΄Π°Π΅ΡΡΡ Π½Π°ΠΏΡΡΠΌΡΡ ΡΠ΅ΡΠ΅Π· html. ΠΠ°ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°ΡΠ΅, ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΈ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ Π΅Π΅ ΡΠ΅ΠΊΡΡΠΎΠΌ Π·Π°Π΄Π°Π΅ΡΡΡ Π² ΡΠ°ΠΉΠ»Π΅ style.css. ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, Π·Π°Π΄Π°Π² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡ, ΠΈ ΠΎΠΏΠΈΡΠ°Π² ΡΡΠΎΡ ΠΊΠ»Π°ΡΡ Π² css.
ΠΠ»Π°ΡΡ ΠΌΡ Π·Π°Π΄Π°Π΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
<img src=βhttp://site2.ru/files/image.jpgβclass="
picture"
/>
ΠΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ ΠΊΠ»Π°ΡΡΠ° Β» picture Β» ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π»ΡΠ±ΡΠΌ. ΠΠ»Π°Π²Π½ΠΎΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΡΠΎΠ²ΠΏΠ°Π΄Π°Π» Π² html Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ ΠΈ ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΡΠΈΠ»Π΅ΠΉ. Π‘ΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎ Π³ΠΎΠ²ΠΎΡΡ, Π² ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΡΠΈΠ»Π΅ΠΉ ( Ρ.Π΅ ΡΠ°ΠΉΠ»Π΅ style.css) Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ
. picture {
float:left; /* ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ */
margin: 7px 7px 7px 0; /* ΠΡΡΡΡΠΏΡ Π²ΠΎΠΊΡΡΠ³ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ²Π΅ΡΡ Ρ, ΡΠΏΡΠ°Π²Π°, ΡΠ½ΠΈΠ·Ρ, ΡΠ»Π΅Π²Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ*/
}
ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π²ΠΏΡΠ°Π²ΠΎ:
. picture {
float:right; /* ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ */
margin: 7px 7px 7px 0; /* ΠΡΡΡΡΠΏΡ Π²ΠΎΠΊΡΡΠ³ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ²Π΅ΡΡ Ρ, ΡΠΏΡΠ°Π²Π°, ΡΠ½ΠΈΠ·Ρ, ΡΠ»Π΅Π²Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ*/
}
ΠΡ Π²ΠΎΡ, Π² ΠΎΠ±ΡΠ΅ΠΌ, ΠΈ Π²ΡΠ΅. ΠΠ΅ Π·Π°Π±ΡΠ²Π°ΠΉΡΠ΅ ΠΏΠΈΡΠ°ΡΡ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡ Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΠΌ ΠΏΠΎΠΌΠΎΠ³Π»Π° ΡΡΠ° ΡΡΠ°ΡΡΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΡΠ°Π²ΡΡΠ΅ Π»Π°ΠΉΠΊΠΈ.
ΠΡΠ΅ Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠ΅Π³ΠΎ Π²Π΅Π±ΠΌΠ°ΡΡΠ΅ΡΠ° | ΠΠ΅Π»Π°Π΅ΠΌ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ Π½Π° HTML ΠΈ CSS
ΠΡΡΡΡΠ°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎ ΡΡΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅:
ΠΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΈ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π²ΡΠ΅Ρ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ β Π½Π΅ΠΎΡΡΠ΅ΠΌΠ»Π΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ²Π°ΠΆΠ°ΡΡΠ΅Π³ΠΎ ΡΠ΅Π±Ρ ΡΠ°ΠΉΡΠ°. ΠΠ°ΠΊ Π²ΡΠ΅Π³Π΄Π°, Π·Π΄Π΅ΡΡ Π½Π΅ ΠΎΠ±ΠΎΠΉΡΠΈΡΡ Π±Π΅Π· CSS. ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ HTML ΡΠ°ΠΌ ΠΏΠΎ ΡΠ΅Π±Π΅ Π΄Π΅Π»Π°Π΅Ρ (Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ² align=left, align=right ΡΠ΅Π³Π° img), Π½ΠΎ ΠΎΠ½ ΠΏΡΠΈ ΡΡΠΎΠΌ Π½Π΅ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΎΡΡΡΡΠΏΠΎΠ². ΠΠΎΡΠΎΠΌΡ Π±Π΅Π· CSS Π²ΡΠ΅-ΡΠ°ΠΊΠΈ Π½Π΅ ΠΎΠ±ΠΎΠΉΡΠΈΡΡ.
ΠΠ±ΡΠ΅Π΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π·Π°Π΄Π°ΡΠΈ
CSS? Π― Π·Π½Π°Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ², Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅ΡΠΈΡΡ ΠΏΠΎΡΡΠ°Π²Π»Π΅Π½Π½ΡΡ Π·Π°Π΄Π°ΡΡ.
Π’Π°ΠΊ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π·Π°ΠΊΠ»ΡΡΠΈΡΡ Π² ΡΠ΅Π³ DIV, ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΡΠ΅ΡΠ΅Π· CSS Π·Π°Π΄Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ float:left ΠΈΠ»ΠΈ float:right, Ρ ΠΏΡΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΡ ΠΎΡΡΡΡΠΏΠΎΠ².
ΠΠΎ ΡΡΠΎΡ ΡΠΏΠΎΡΠΎΠ± Ρ Π±Ρ Π½Π΅ Π½Π°Π·Π²Π°Π» ΡΠ°ΠΌΡΠΌ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΡΠΌ β Π·Π°ΡΠ΅ΠΌ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ Π»ΠΈΡΠ½ΠΈΠΉ ΡΠ΅Π³, Π΅ΡΠ»ΠΈ Π²ΠΎΠΏΡΠΎΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅ΡΠΈΡΡ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π² ΡΠ°ΠΌΠΊΠ°Ρ ΡΠ΅Π³Π° IMG?
ΠΠ΅Π»Π°Π΅ΡΡΡ ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½ΠΈΡ Π²ΡΠ΅ ΡΠ΅Ρ ΠΆΠ΅ ΡΠ°ΠΌΡΡ ΡΠ²ΠΎΠΉΡΡΠ² β float, ΠΎΡΠ²Π΅ΡΠ°ΡΡΠ΅Π³ΠΎ Π·Π° Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅, ΠΈ margin, ΠΎΡΠ²Π΅ΡΠ°ΡΡΠ΅Π³ΠΎ Π·Π° ΠΎΡΡΡΡΠΏΡ.
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° ΠΏΡΠΈΡΠ²ΠΎΠΈΠΌ Π½Π°ΡΠ΅ΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡ:
<img src="ΠΌΠΎΡ_ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°.jpg" />
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΡΠΎΠΏΠΈΡΠ΅ΠΌ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² CSS β ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΡΡΠΎ Ρ Π½Π°Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π±ΡΠ΄Π΅Ρ ΡΡΠΎΡΡΡ ΡΠ»Π΅Π²Π°:
.img_class { float: left; margin: 10px 10px 10px 0; }
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ margin ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ ΠΎΡΡΡΡΠΏΡ ΡΠ΅ΠΊΡΡΠ° ΠΎΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ β ΠΈΠ½Π°ΡΠ΅ ΠΎΠ½ Π²ΠΏΠ»ΠΎΡΠ½ΡΡ ΠΊ Π½Π΅ΠΉ ΠΏΡΠΈΠΆΠΌΠ΅ΡΡΡ, ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π½Π΅ ΠΎΡΠ΅Π½Ρ ΠΊΡΠ°ΡΠΈΠ²ΠΎ. ΠΡΠΈ ΡΡΠΎΠΌ ΠΌΡ Π·Π°Π΄Π°Π΅ΠΌ ΠΈΡ ΡΠ²Π΅ΡΡ Ρ, ΡΠΏΡΠ°Π²Π° ΠΈ ΡΠ½ΠΈΠ·Ρ, Π° Π»Π΅Π²ΡΠΉ ΠΎΡΡΡΡΠΏ ΡΡΠ°Π²ΠΈΠΌ ΡΠ°Π²Π½ΡΠΌ Π½ΡΠ»Ρ β ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠ°ΠΌΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ ΡΠ»Π΅Π²Π°.
ΠΠ°ΡΡΠΎΠ²ΠΎΠ΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΡΠ»ΠΈ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ Π²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π»ΠΈΡΡ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ, ΡΠΎΠ³Π΄Π° ΡΡΠΎΡ Π²ΠΎΠΏΡΠΎΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅ΡΠΈΡΡ ΡΡΠ°Π·Ρ Π½Π° ΡΡΠΎΠ²Π½Π΅ ΡΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° (ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°) ΡΡΡΠ°Π½ΠΈΡΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ΠΈ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ β ΡΡΠΎΠ±Ρ Π½Π΅ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π· class Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ°ΠΆΠ΅ Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ ΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ ΡΡΠ°ΡΠΈΠΊΠ° ΡΠΎΠ³ΠΎ ΡΡΠΎΠΈΡ.
ΠΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΡΡΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΠΏΠΎΡΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ Π² <div class=Β»contentΒ»></div>.
Π ΡΠ°ΠΊΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π² CSS ΡΠ°ΠΉΠ»Π΅ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
.content img { float: left; margin: 10px 10px 10px 0; }
Π’Π΅ΠΏΠ΅ΡΡ Π²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π½Π°Ρ ΠΎΠ΄ΡΡΠΈΠ΅ΡΡ Π² Π±Π»ΠΎΠΊΠ΅ Β«contentΒ», Π±ΡΠ΄ΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡΡΡ ΡΠ»Π΅Π²Π° ΠΈ ΠΈΠΌΠ΅ΡΡ Π²ΡΡΠ΅ΡΠΊΠ°Π·Π°Π½Π½ΡΠ΅ ΠΎΡΡΡΡΠΏΡ. ΠΡΠ»ΠΈ Π΄Π»Ρ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-ΡΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²Ρ Π·Π°Ρ ΠΎΡΠΈΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ β Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ Π΅Π³ΠΎ ΡΠΏΡΠ°Π²Π°, ΡΠΎ Π΄Π»Ρ Π½Π΅Π³ΠΎ Π±ΡΠ΄Π΅Ρ Π½ΡΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ id (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, id=Β»my_imgΒ») ΠΈ Π² css ΡΠ°ΠΉΠ»Π΅ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΡΠ°ΠΊΠΈΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ (Π΄ΠΎΠ»ΠΆΠ½Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ ΡΠΎ Π·Π½Π°ΠΊΠ° ΡΠ΅ΡΠ΅ΡΠΊΠΈ β #):
#my_img { float: right; margin: 10px 0 10px 10px; }
ΠΠ°ΠΊΠ»Π°Π΄ΡΠ²Π°Π΅ΠΌ ΡΠ΅ΠΊΡΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
ΠΠΎΡΠΎΠΉ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ, ΡΡΠΎΠ±Ρ ΡΠ΅ΠΊΡΡ Π±ΡΠ» Π½Π°ΠΏΠΈΡΠ°Π½ ΠΏΡΡΠΌΠΎ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ β Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°ΡΡΠΎ Π±ΡΠ²Π°Π΅Ρ ΠΊΡΠ°ΡΠΈΠ²ΠΎ, Π΅ΡΠ»ΠΈ ΡΠ΄Π΅Π»Π°ΡΡ Π±ΠΎΠ»ΡΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΊ ΡΡΠ°ΡΡΠ΅, Π° Π½Π° Π½Π΅ΠΉ Π½Π°ΠΏΠΈΡΠ°ΡΡ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΡΡΠ°ΡΡΠΈ ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΡΡ-ΡΠΎ Π°Π½Π½ΠΎΡΠ°ΡΠΈΡ.
ΠΠΏΡΡΡ-ΡΠ°ΠΊΠΈ, ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ². ΠΡΠΈΠ²Π΅Π΄Ρ Π΄Π²Π° Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ .
ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π±Π»ΠΎΠΊ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π±ΡΠ΄Π΅Ρ Π½Π°ΠΏΠΈΡΠ°Π½ ΡΠ΅ΠΊΡΡ, Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ Π²ΡΡΡΡΠΏΠ°ΡΡ ΡΠΎΠ½ΠΎΠΌ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°:
<div>Π’Π΅ΠΊΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ Π½Π°Π»ΠΎΠΆΠ΅Π½ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ</div>
.my_block { background: url (my_img.jpg) top left no-repeat; width: 500px; height: 300px; padding: 400px 0 0 0; }
Π ΡΡΠΎΠΌ Π±Π»ΠΎΠΊΠ΅ ΡΡΡΠΎΠΊΠ° Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡΡ Π² Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ Π±Π»ΠΎΠΊΠ° β Ρ Π²Π΅ΡΡ Π½ΠΈΠΌ ΠΎΡΡΡΡΠΏΠΎΠΌ Π² 400 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΠ°Π½Π½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Ρ ΠΎΡΠΎΡΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π° (ΡΠ°ΠΏΠΊΠ°, Π»ΠΎΠ³ΠΎΡΠΈΠΏ ΡΠ°ΠΉΡΠ°), Π² ΠΊΠΎΡΠΎΡΡΡ ΡΠΆΠ΅ Π·Π°ΡΠ°Π½Π΅Π΅ ΠΈΠ·Π²Π΅ΡΡΠ΅Π½ ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΈ ΡΠ΅ΠΊΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ Π½Π°ΠΏΠΈΡΠ°Π½.
ΠΡΡΠ³ΠΎΠΉ ΠΌΠ΅ΡΠΎΠ΄ β ΡΡΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π΄Π²Π° Π±Π»ΠΎΠΊΠ° (ΠΎΠ΄ΠΈΠ½ β Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ, Π΄ΡΡΠ³ΠΎΠΉ β Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ), ΠΈ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ ΠΎΠ΄ΠΈΠ½ Β«ΡΠ²Π΅ΡΡ ΡΒ» Π΄ΡΡΠ³ΠΎΠ³ΠΎ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π·Π°Π΄Π°Π½Π½ΡΠΌΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ. ΠΠΎΠ»ΡΡΠΎΠΉ ΠΏΠ»ΡΡ ΡΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΠΎΠ΄Π° ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Ρ Π±Π»ΠΎΠΊΠ° Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ ΡΠΎΠ½ (Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ ΠΈ ΠΏΠΎΠ»ΡΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ):
<div> <img src="ΠΌΠΎΡ_ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°.jpg" /> <div>Π’Π΅ΠΊΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ Π½Π°Π»ΠΎΠΆΠ΅Π½ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ</div> </div>
.img { width:500px; height: 300px; position: relative; } .text { background-color: #FFF; width: 500px; height: 50px; position: absolute; left: 0px; top: 450px; }
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠ»ΠΈ ΠΎΠ΄ΠΈΠ½ Π±Π»ΠΎΠΊ Π²Π½ΡΡΡΠΈ Π΄ΡΡΠ³ΠΎΠ³ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° position β Π±Π»ΠΎΠΊ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ Π±Π΅Π»ΡΠΉ ΡΠΎΠ½ ΠΈ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π² Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, Π½ΠΈΡΠ΅Π³ΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎΠ³ΠΎ Π² ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ ΠΈ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° Π½Π΅Ρ, Π³Π»Π°Π²Π½ΠΎΠ΅ β ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈ ΠΏΠΎΠ΄Π±ΠΈΡΠ°ΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ΄Π°ΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ!