ஒரு HTML ஆவணத்தில் ஒரு தொகுதி-நிலை உறுப்பு தொடர்ச்சியான வரிசையில் தோன்றுகிறது (எ.கா. வலைப்பக்கம்). பக்கத்தை இன்னும் கவர்ந்திழுக்கும் அல்லது அதன் பயனை மேம்படுத்துவதற்காக, மாற்றங்களை மாற்றுவதற்கு, படங்களையும் உள்ளடக்கிய தொகுதிகள் மூட வேண்டும், இதனால் அந்த பக்கத்தின் உரை அதைச் சுற்றியே செல்கிறது.
இணைய அடிப்படையில், இந்த விளைவு "மிதக்கும்" படம் என்று அறியப்படுகிறது. இந்த பாணி CSS சொத்துடன் "float." இந்த சொத்து அதன் வலது பக்கத்திற்கு இடது சீரற்ற படத்தை சுற்றி உரை ஓட்டம் அனுமதிக்கிறது. அல்லது அதன் இடது பக்கத்தில் ஒரு வலது சீரற்ற படத்தை சுற்றி.
HTML உடன் தொடங்கவும்
நீங்கள் செய்ய வேண்டியது முதல் காரியம் சில HTML உடன் வேலை செய்ய வேண்டும். உதாரணத்திற்கு, நாம் ஒரு பத்தி உரையை எழுதி, பத்தி தொடக்கத்தில் ஒரு படத்தை சேர்க்கும் (உரைக்கு முன்,
டேக்). இங்கே என்ன HTML மார்க் தோன்றுகிறது:
பாராவின் உரை இங்கே செல்கிறது. இந்த எடுத்துக்காட்டில், நாம் ஒரு தலைப்பை புகைப்படம் ஒரு படம் உள்ளது, எனவே இந்த உரை வாய்ப்பு உள்ளது யார் நபர் பற்றி இருக்கும்.
இயல்புநிலையாக, எங்களின் வலைப்பக்கமானது உரைக்கு மேலே படத்துடன் காட்டப்படும், ஏனெனில் HTML இல் உள்ள பிளாட்-லெவல் கூறுகள் படங்கள். இதன் பொருள் உலாவி முன்னிருப்பாக படத்தை உறுப்புக்கு முன்னும் பின்னும் வரிகளை உடைக்கிறது. CSS ஐ திருப்புவதன் மூலம் இந்த இயல்புநிலை தோற்றத்தை மாற்றுவோம். எவ்வாறாயினும், நாம் எமது பட உறுப்புக்கு ஒரு வர்க்க மதிப்பு சேர்க்கும். அந்த வகுப்பு ஒரு "கொக்கி" ஆக செயல்படும், பின்னர் நாங்கள் எங்கள் CSS இல் பயன்படுத்துவோம்.
பாராவின் உரை இங்கே செல்கிறது. இந்த எடுத்துக்காட்டில், நாம் ஒரு தலைப்பை புகைப்படம் ஒரு படம் உள்ளது, எனவே இந்த உரை வாய்ப்பு உள்ளது யார் நபர் பற்றி இருக்கும்.
"இடது" என்ற இந்த வர்க்கம் ஒன்றும் அதன் சொந்ததல்ல. எங்களுக்கு தேவையான பாணியை சாதிக்க, நாம் அடுத்த CSS ஐ பயன்படுத்த வேண்டும்.
CSS பாங்குகள்
எங்கள் HTML இடத்தில் ("இடது" எங்கள் வர்க்கம் பண்பு உட்பட) நாம் இப்போது CSS திரும்ப முடியும். நாம் அந்த படத்தை மிதக்க வேண்டும் என்று எங்கள் நடைதாளுடன் ஒரு விதி சேர்க்க வேண்டும் மற்றும் அதை அடுத்த ஒரு சிறிய திணிப்பு சேர்க்க வேண்டும் என்று இறுதியில் படத்தை சுற்றி போர்த்தி என்று உரை மிகவும் நெருக்கமாக எதிராக பட்டு இல்லை. இங்கு எழுதக்கூடிய CSS:
. லெஃப்டி { மிதவை: இடது; திணிப்பு: 0 20px 20px 0;}
இந்த பாணி இடதுபுறத்தில் அந்த படத்தை மிதக்கிறது மற்றும் படத்தின் வலது மற்றும் கீழ் ஒரு சிறிய திணிப்பு (சில CSS சுருக்கெழுத்து பயன்படுத்தி) சேர்க்கிறது. ஒரு உலாவியில் இந்த HTML ஐ கொண்டிருக்கும் பக்கத்தை நீங்கள் மதிப்பாய்வு செய்தால், படம் இப்போது இடதுபக்கத்துடன் சீரமைக்கப்படும், மேலும் பாராவின் உரை அதன் வலதுபுறத்தில் வலதுபுறமாக தோன்றும். நாம் பயன்படுத்தும் "இடது" வகுப்பு மதிப்பு தன்னிச்சையானது என்பதை கவனத்தில் கொள்க. "இடது" என்ற வார்த்தை, சொந்தமாக எதுவும் செய்யாததால், அதை நாம் எதையாவது அழைத்திருக்கலாம். நீங்கள் எந்த வார்த்தையை பயன்படுத்த வேண்டும் ஒரு வர்க்கம் கற்பிதம் வேண்டும் என்று நீங்கள் செய்ய வேண்டும் என்று பார்க்கும் மாற்றங்களை ஆணையிடும் ஒரு உண்மையான CSS பாணி வேலை. இந்த வகை அணுகுமுறை ஒரு வகுப்பு பண்புக்கூற்றைக் கொடுக்கும் அணுகுமுறை மற்றும் உறுப்புகளை மிதக்கும் ஒரு பொதுவான CSS பாணியைப் பயன்படுத்துவதன் மூலம் இந்த "இடது சீரமைக்கப்பட்ட உருவம்" தோற்றத்தை நீங்கள் சாதிக்க முடியும். நீங்கள் படத்தின் வர்க்க மதிப்பை ஆஃப் எடுத்து, CSS ஐ மேலும் குறிப்பிட்ட தேர்வாளரால் எழுதலாம். எடுத்துக்காட்டுக்கு, ஒரு படம் ஒரு "பிரதான உள்ளடக்கம்" வகுப்பு மதிப்புடன் ஒரு பிரிவின் உள்ளே உள்ளது. இந்த படத்தை பாணியில், நீங்கள் இந்த CSS எழுதலாம்: .main-content img { மிதவை: இடது; திணிப்பு: 0 20px 20px 0;}
இந்த சூழ்நிலையில், எங்கள் படத்தை இடதுபுறமாக சீரமைக்க வேண்டும், அதைப் போன்ற உரை முன் மிதக்கிறது, ஆனால் எங்களின் மார்க்அப்பிற்கு ஒரு கூடுதல் வகுப்பு மதிப்பை சேர்க்க வேண்டிய அவசியமில்லை. இதை செய்யும்போது சிறிய HTML கோப்பை உருவாக்க உதவுகிறது, இது நிர்வகிக்க எளிதாக இருக்கும், மேலும் செயல்திறனை மேம்படுத்த உதவவும் முடியும். கடைசியாக, உங்கள் HTML மார்க்கத்தில் நேரடியாக இந்த பாணியை நீங்கள் சேர்க்கலாம்:
இந்த முறை "இன்லைன் பாங்குகள்" என்று அழைக்கப்படுகிறது. இது உறுதியற்றது ஏனெனில் இது ஒரு உறுப்பு பாணியை அதன் கட்டமைப்பு மார்க்அப் உடன் இணைக்கிறது. ஒரு வலைப்பக்கத்தின் பாணியும் கட்டமைப்பும் தனித்தனியாக இருக்க வேண்டும் என்று வலை சிறந்த நடைமுறைகள் கூறுகின்றன. உங்கள் பக்கத்தை அதன் தளவமைப்பு மாற்ற மற்றும் ஒரு பதிலளிக்க வலைத்தளத்துடன் வெவ்வேறு திரை அளவுகள் மற்றும் சாதனங்களுக்கான பார்வை தேவைப்படும்போது இந்த பிரித்தல் குறிப்பாக உதவியாக இருக்கும். HTML இல் இணைந்திருக்கும் பக்கத்தின் பாணியைக் கொண்டிருப்பது, அந்த வெவ்வேறு திரைகளில் தேவைப்படும் உங்கள் தளத்தின் தோற்றத்தை சரிசெய்யக்கூடிய ஊடக கேள்விகளை எழுப்புவது மிகவும் கடினம். இந்த பாணியை அடைய மாற்று வழிகள்
பாராவின் உரை இங்கே செல்கிறது. இந்த எடுத்துக்காட்டில், நாம் ஒரு தலைப்பை புகைப்படம் ஒரு படம் உள்ளது, எனவே இந்த உரை வாய்ப்பு உள்ளது யார் நபர் பற்றி இருக்கும். இன்லைன் பாங்குகள் தவிர்க்கவும்
பாராவின் உரை இங்கே செல்கிறது. இந்த எடுத்துக்காட்டில், நாம் ஒரு தலைப்பை புகைப்படம் ஒரு படம் உள்ளது, எனவே இந்த உரை வாய்ப்பு உள்ளது யார் நபர் பற்றி இருக்கும்.
