Jassif Team Institution

CSS Float

Pineapple

CSS இல் float பண்பு ஒரு உறுப்பு அதன் கொள்கலனுக்குள் எவ்வாறு மிதக்க வேண்டும் என்பதை குறிப்பிடுகிறது.

இது ஒரு உறுப்பை அதன் கொள்கலனின் இடது அல்லது வலது பக்கத்தில் வைக்கிறது, இதனால் உரை மற்றும் இன்லைன் உறுப்புகள் அதைச் சுற்றி வரும்.

இந்த <div> உள்ளே உள்ள படம் வலதுபுறம் மிதக்கிறது.

திரையை சிறியதாக ஆக்கினால், உரை படத்தைச் சுற்றி வருவதைக் காண்பீர்கள்.

CSS float பண்பு

float பண்பு உறுப்புகளை நிலைப்படுத்தவும் மற்றும் உள்ளடக்கத்தை வடிவமைக்கவும் பயன்படுத்தப்படுகிறது. உதாரணமாக, ஒரு படத்தை ஒரு கொள்கலனில் உள்ள உரையின் இடதுபுறத்தில் மிதக்க விடலாம்.

இந்த பண்பு பின்வரும் மதிப்புகளில் ஒன்றைக் கொண்டிருக்கலாம்:

• left - உறுப்பு அதன் கொள்கலனின் இடது பக்கத்தில் மிதக்கிறது
• right - உறுப்பு அதன் கொள்கலனின் வலது பக்கத்தில் மிதக்கிறது
• none - இயல்புநிலை. உறுப்பு மிதக்காது மற்றும் உரையில் நிகழும் இடத்தில் காண்பிக்கப்படுகிறது
• inherit - உறுப்பு அதன் பெற்றோரின் float மதிப்பைப் பெறுகிறது

CSS float: right எடுத்துக்காட்டு

float: right மதிப்பு ஒரு உறுப்பு அதன் கொள்கலனுக்குள் வலதுபுறம் மிதக்க வேண்டும் என்பதைக் குறிக்கிறது.

பின்வரும் எடுத்துக்காட்டு படம் வலதுபுறம் மிதக்க வேண்டும் என்பதை குறிப்பிடுகிறது:

Pineapple

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

எடுத்துக்காட்டு

img {
  float: right;
}

CSS float: left எடுத்துக்காட்டு

float: left மதிப்பு ஒரு உறுப்பு அதன் கொள்கலனுக்குள் இடதுபுறம் மிதக்க வேண்டும் என்பதைக் குறிக்கிறது.

பின்வரும் எடுத்துக்காட்டு படம் இடதுபுறம் மிதக்க வேண்டும் என்பதை குறிப்பிடுகிறது:

Pineapple

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

எடுத்துக்காட்டு

img {
  float: left;
}

CSS float: none எடுத்துக்காட்டு

float: none மதிப்பு float க்கான இயல்புநிலை மதிப்பாகும், மேலும் உறுப்பு அதன் கொள்கலனில் நிகழும் இடத்தில் காண்பிக்கப்படுகிறது.

பின்வரும் எடுத்துக்காட்டில், படம் கொள்கலனில் நிகழும் இடத்தில் காண்பிக்கப்படும்:

Pineapple

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

எடுத்துக்காட்டு

img {
  float: none;
}

CSS Float அருகருகே

HTML <div> உறுப்புகள் தொகுதி உறுப்புகளாகும், மேலும் ஒரு புதிய வரியில் தொடங்கி கிடைக்கக்கூடிய முழு அகலத்தையும் எடுத்துக்கொள்ளும். இருப்பினும், float: left பயன்படுத்தினால் <div> உறுப்புகள் ஒன்றுக்கு ஒன்று அருகருகே மிதக்கும்:

எடுத்துக்காட்டு

div {
  float: left;
  padding: 15px;
}

.div1 {
  background: red;
}

.div2 {
  background: yellow;
}

.div3 {
  background: green;
}

பயிற்சி

img {
  : ;
}

CSS Float பண்பு குறிப்பு