புரிந்துணர்வு CSS ஃப்ளோட்

வலை பக்க எழுத்துமுறைகளை வடிவமைப்பதற்கு CSS மிதவை சொத்து பயன்படுத்துதல்

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

ஒரு நடை தாள், CSS மிதவை சொத்து இந்த மாதிரி:

சரி. }

இது "வலது" வகுப்பு அனைத்தையும் வலதுபுறத்தில் மிதக்க வேண்டும் என்று உலாவிக்கு சொல்கிறது.

நீங்கள் இதைப்போல ஒதுக்க வேண்டும்:

class = "right" />

நீங்கள் CSS மிதவை சொத்து கொண்டு என்ன மிதக்க முடியுமா?

வலைப்பக்கத்தில் ஒவ்வொரு உறுப்புகளையும் நீங்கள் மிதக்க முடியாது. நீங்கள் தொகுதி நிலை கூறுகளை மட்டுமே மிதக்க முடியும். இவை படங்களில் (), பத்திகள் (), பிரிவு (), மற்றும் பட்டியல்கள் () போன்ற பக்கத்தின் ஒரு தொகுதி தொகுதிகளை எடுத்துக் கொள்ளும் கூறுகள்.

உரை பாதிக்கும் மற்ற உறுப்புகள், ஆனால் பக்கத்தில் ஒரு பெட்டியை உருவாக்க வேண்டாம் இன்லைன் உறுப்புகள் என்று மற்றும் மிதக்க முடியாது. இவை span (), வரி இடைவெளிகள் (), வலுவான முக்கியத்துவம் (), அல்லது சாய்வு () போன்ற கூறுகள்.

எங்கே அவர்கள் மிதக்கிறார்கள்?

நீங்கள் வலது அல்லது இடது உறுப்புகள் மிதக்க முடியும். மிதக்கும் உறுப்பு பின்வருமாறு எந்த உறுப்பு மற்ற பக்கத்தில் மிதக்கும் உறுப்பு சுற்றி ஓடும்.

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

இது பொதுவாக படத்தின் கீழே காட்டப்படும் பின்வரும் உரை முதல் வரி உள்ளது.

அவர்கள் எப்படி மிதக்கிறார்கள்?

மிதமிஞ்சிய ஒரு உறுப்பு அது முடியும் என கொள்கலன் உறுப்பு இடது அல்லது வலது இதுவரை நகரும். உங்கள் குறியீடு எவ்வாறு எழுதப்பட்டுள்ளது என்பதைப் பொறுத்து பல வெவ்வேறு சூழ்நிலைகளில் இது நிகழ்கிறது.

இந்த எடுத்துக்காட்டுகளுக்கு, நான் ஒரு சிறிய DIV உறுப்பு இடது பக்கமாக மிதக்கிறேன்:

• மிதக்கும் உறுப்பு முன் வரையறுக்கப்பட்ட அகலத்தை கொண்டிருக்கவில்லை என்றால், அது தேவைப்படும் அளவுக்கு கிடைமட்டமாகவும், கிடைமட்டமாகவும் இருக்காது, இது பொருட்படுத்தாமல் மிதவை. குறிப்பு: அகலமான வரையறுக்கப்படாத போது, ​​சில உலாவிகள் மிதமிஞ்சிய உறுப்புகளுக்கு அருகில் உள்ள உறுப்புகளை வைக்க முயற்சிக்கும். எனவே நீங்கள் எப்போதும் மிதக்கும் உறுப்புகள் ஒரு அகலம் வரையறுக்க வேண்டும்.
• கொள்கலன் உறுப்பு HTML உறுப்பு என்றால், மிதக்கும் DIV பக்கம் இடது விளிம்பில் உட்கார்ந்து.
• கொள்கலன் உறுப்பு வேறு ஏதாவது இருந்தால், மிதக்கும் DIV கொள்கலன் இடது விளிம்பு உட்கார.
• நீங்கள் கூடு மிதந்த கூறுகள் முடியும், மற்றும் அது ஒரு ஆச்சரியமான இடத்தில் முடிவடையும் மிதவை விளைவிக்கலாம். உதாரணமாக, இந்த மிதவை சரியான மிதக்கும் DIV உள்ளே இடது மிதக்கும் DIV ஆகும்.
• கொள்கலனில் உள்ள அறை இருந்தால், மிதமிஞ்சிய உறுப்புகள் ஒருவருக்கொருவர் அடுத்ததாக உட்காரும். உதாரணமாக, இந்த கொள்கலன் 400px பரந்த கொள்கலன் உள்ள மிதக்க மூன்று 100px பரந்த DIV கூறுகள் உள்ளன.

புகைப்பட தொகுப்பு அமைப்பை உருவாக்க மிதவை பயன்படுத்தலாம். தலைப்பைக் கொண்ட DIV மற்றும் கொள்கலனில் உள்ள DIV உறுப்புகளை மிதக்க ஒவ்வொரு thumbnail (அவை அனைத்தும் ஒரே அளவில் இருக்கும் போது சிறப்பாக செயல்படுகின்றன).

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

மிதவை இனிய திருப்பு

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

தெளிவான: இடது;
தெளிவாக: சரி;
தெளிவாக: இருவரும்;

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

வெவ்வேறு தளவமைப்பு விளைவுகளை பெற உங்கள் ஆவணங்களில் உள்ள பல்வேறு உறுப்புகளின் தெளிவான மதிப்போடு விளையாடவும்.

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

HTML (இந்த பத்தி மீண்டும்):

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

CSS (இடது படங்களை மிதக்க):

img.float {float: left;
தெளிவான: left;
விளிம்பு: 5px;
}

மற்றும் வலது:

img.float {float: right;
தெளிவான: வலது;
விளிம்பு: 5px;
}

தளவமைப்புகளுக்கான Floats ஐப் பயன்படுத்துதல்

மிதவை சொத்து எவ்வாறு இயங்குகிறது என்பதைப் புரிந்து கொள்ளும்போது, ​​உங்கள் இணையப் பக்கங்களைத் திறக்க அதைப் பயன்படுத்தலாம். ஒரு மிதக்கும் வலைப்பக்கத்தை உருவாக்க நான் எடுக்கின்ற படிகள் இவை:

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

உங்கள் தளவமைப்பு பிரிவுகளின் அகலங்களை (சதவீதங்கள் அபராதம்) நீங்கள் அறிந்திருக்கும் வரை, பக்கத்திலிருக்கும் இடங்களில் அவற்றைப் போடுவதற்கு நீங்கள் மிதவை சொத்துகளைப் பயன்படுத்தலாம். நல்ல விஷயம், இன்டர்நெட் எக்ஸ்ப்ளோரர் அல்லது பயர்பாக்ஸ் பாக்ஸ் மாதிரியைப் பொறுத்தவரை நீங்கள் கவலைப்பட வேண்டியதில்லை.