ஒரு வலைப்பக்கத்தில் உரை இடது பக்கத்தில் ஒரு படம் எப்படி ஓட்டம்

ஒரு வலைப்பக்கத்தை லேஅவுட் இடது பக்கத்தில் ஒரு படத்தை align CSS ஐ பயன்படுத்தி

இன்று ஏறக்குறைய எந்த வலைப்பக்கத்தையும் பாருங்கள், அந்த பக்கங்களின் பெரும்பகுதியை உருவாக்கும் உரை மற்றும் படங்கள் ஆகியவற்றின் கலவையை நீங்கள் பார்ப்பீர்கள். இது ஒரு பக்கம் உரை மற்றும் படங்கள் சேர்க்க மிகவும் எளிதானது. பத்திகள், பட்டியல்கள், மற்றும் தலைப்புகள் போன்ற நிலையான HTML குறிச்சொற்களை பயன்படுத்தி உரை உறுப்பைப் பயன்படுத்தி சேர்க்கப்படும் போது உரை குறியிடப்பட்டுள்ளது.

உரை மற்றும் அந்த படங்களை நன்றாக வேலை செய்யும் திறனை தவிர பெரிய வலை வடிவமைப்பாளர்கள் அமைக்கிறது என்ன ஆகிறது! நீங்கள் உங்கள் உரை மற்றும் படங்கள் மற்றொரு பிறகு ஒரு தோன்றும் வேண்டும், இது இந்த தொகுதி நிலை உறுப்புகள் இயல்புநிலை மூலம் அமைப்பை எப்படி உள்ளது. இல்லை, நீங்கள் உரை மற்றும் படங்கள் இறுதியில் உங்கள் வலைத்தளத்தின் காட்சி வடிவமைப்பு இருக்கும் என்ன ஒன்றாக ஓட்டம் எப்படி சில கட்டுப்பாடு வேண்டும்.

ஒரு பக்கத்தின் இடதுபுறத்தில் உள்ள பக்கத்தின் பக்கத்தின் பக்கத்தோடு ஒட்டிக் கொண்டிருக்கும் படத்தை வைத்திருப்பது அச்சிடப்பட்ட வடிவமைப்பிற்கும் வலைப்பக்கங்களுக்கும் ஒரு பொது வடிவமைப்பு சிகிச்சையாகும். இணைய அடிப்படையில், இந்த விளைவு படத்தை மிதப்பது என அறியப்படுகிறது . இந்த பாணி "float" க்கான CSS சொத்துடன் அடையப்படுகிறது. இந்த சொத்து அதன் வலது பக்கத்திற்கு இடது சீரற்ற படத்தை சுற்றி உரை ஓட்டம் அனுமதிக்கிறது. (அல்லது அதன் இடது பக்கத்தில் ஒரு வலது சீரற்ற படத்தை சுற்றி.) இந்த காட்சி விளைவு அடைய எப்படி பாருங்கள்.

HTML உடன் தொடங்கவும்

நீங்கள் செய்ய வேண்டியது முதல் காரியம் சில HTML உடன் வேலை செய்ய வேண்டும். உதாரணத்திற்கு, நாம் ஒரு பத்தி உரையை எழுதி, பத்தி தொடக்கத்தில் (உரைக்கு முன், ஆனால் திறந்த

குறிச்சொல்லைப் பிறகு) ஒரு படத்தை சேர்க்கலாம். இங்கே என்ன HTML மார்க் தோன்றுகிறது:

பாராவின் உரை இங்கே செல்கிறது. இந்த எடுத்துக்காட்டில், நாம் ஒரு தலைப்பை புகைப்படம் ஒரு படம் உள்ளது, எனவே இந்த உரை வாய்ப்பு உள்ளது யார் நபர் பற்றி இருக்கும்.

முன்னிருப்பாக, எங்கள் வலைப்பக்கமானது உரைக்கு மேலே உள்ள படத்துடன் காட்டப்படும். இது HTML இல் உள்ள பிளாட்-லெவல் கூறுகள் ஆகும். இதன் பொருள் உலாவி முன்னிருப்பாக படத்தை உறுப்புக்கு முன்னும் பின்னும் வரிகளை உடைக்கிறது. CSS ஐ திருப்புவதன் மூலம் இந்த இயல்புநிலை தோற்றத்தை மாற்றுவோம். எவ்வாறாயினும், நாம் எமது பட உறுப்புக்கு ஒரு வர்க்க மதிப்பு சேர்க்கும். அந்த வகுப்பு ஒரு "கொக்கி" ஆக செயல்படும், பின்னர் நாங்கள் எங்கள் CSS இல் பயன்படுத்துவோம்.

"இடது" என்ற இந்த வர்க்கம் தனியாக எதுவும் செய்யவில்லை என்பதைக் கவனியுங்கள்! எங்களுக்கு தேவையான பாணியை சாதிக்க, நாம் அடுத்த CSS ஐ பயன்படுத்த வேண்டும்.

CSS பாங்குகள்

"HTML" என்ற எங்கள் வகுப்பு பண்புக்கூறு உள்ளிட்ட எமது HTML உடன், இப்போது CSS க்கு திரும்பலாம். நாம் அந்த படத்தை மிதக்க வேண்டும் என்று எங்கள் நடைதாளுடன் ஒரு விதி சேர்க்க வேண்டும் மற்றும் அதை அடுத்த ஒரு சிறிய திணிப்பு சேர்க்க வேண்டும் என்று இறுதியில் படத்தை சுற்றி போர்த்தி என்று உரை மிகவும் நெருக்கமாக எதிராக பட்டு இல்லை. இங்கு எழுதக்கூடிய CSS:

. இடது {float: left; திணிப்பு: 0 20px 20px 0; }

இந்த பாணி இடதுபுறத்தில் அந்த படத்தை மிதக்கிறது மற்றும் படத்தின் வலது மற்றும் கீழ் ஒரு சிறிய திணிப்பு (சில CSS சுருக்கெழுத்து பயன்படுத்தி) சேர்க்கிறது.

ஒரு உலாவியில் இந்த HTML ஐ கொண்டிருக்கும் பக்கத்தை நீங்கள் மதிப்பாய்வு செய்தால், படம் இப்போது இடதுபக்கத்துடன் சீரமைக்கப்படும், மேலும் பாராவின் உரை அதன் வலதுபுறத்தில் வலதுபுறமாக தோன்றும். நாம் பயன்படுத்தும் "இடது" வகுப்பு மதிப்பு தன்னிச்சையானது என்பதை கவனத்தில் கொள்க. "இடது" என்ற வார்த்தை, சொந்தமாக எதுவும் செய்யாததால், அதை நாம் எதையாவது அழைத்திருக்கலாம். இது நீங்கள் செய்ய விரும்பும் காட்சி மாற்றங்களை ஆணையிடுகின்ற ஒரு உண்மையான CSS பாணியில் இயங்கும் HTML இல் ஒரு வகுப்பு பண்புக்கூற்றை கொண்டிருக்க வேண்டும்.

இந்த பாணியை அடைய மாற்று வழிகள்

இந்த வகை அணுகுமுறை ஒரு வகுப்பு பண்புக்கூற்றைக் கொடுக்கும் அணுகுமுறை மற்றும் உறுப்புகளை மிதக்கும் ஒரு பொதுவான CSS பாணியைப் பயன்படுத்துவதன் மூலம் இந்த "இடது சீரமைக்கப்பட்ட உருவம்" தோற்றத்தை நீங்கள் சாதிக்க முடியும். நீங்கள் படத்தின் வர்க்க மதிப்பை ஆஃப் எடுத்து, CSS ஐ மேலும் குறிப்பிட்ட தேர்வாளரால் எழுதலாம். உதாரணமாக, உதாரணமாக, அந்த படம் "பிரதான உள்ளடக்கத்தின்" வகுப்பு மதிப்புடன் ஒரு பிரிவின் உள்ளே உள்ளது.