CSS Float Examples

மிதப்பு பண்பின் நடைமுறை பயன்பாடுகள்

Create Equal Width Boxes

float பண்புடன், உள்ளடக்கப் பெட்டிகளை ஒன்றுக்குப் பிறகு ஒன்றாக மிதக்கச் செய்வது எளிது:

Three Equal Width Boxes
Box 1
Box 2
Box 3
Two Equal Width Boxes
Box 1
Box 2

Example

* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 33.33%; /* three boxes (use 25% for four, and 50% for two, etc) */
  padding: 50px; /* if you want space between the images */
}

What is box-sizing?

box-sizing பண்பு என்ன?

நீங்கள் எளிதாக மூன்று மிதக்கும் பெட்டிகளை ஒன்றுக்குப் பிறகு ஒன்றாக உருவாக்கலாம். இருப்பினும், ஒவ்வொரு பெட்டியின் அகலத்தையும் பெரிதாக்கும் ஏதாவது சேர்க்கும்போது (எ.கா. padding அல்லது borders), பெட்டி உடைந்து போகலாம். box-sizing பண்பானது padding மற்றும் border ஐ பெட்டியின் மொத்த அகலத்தில் (மற்றும் உயரம்) சேர்க்க அனுமதிக்கிறது, padding பெட்டிக்குள் இருக்கும் என்பதை உறுதிப்படுத்துகிறது மற்றும் அது உடைக்காது.

box-sizing பண்பு பற்றி மேலும் எங்கள் CSS Box Sizing பாடத்தில் படிக்கலாம்.

Images Side By Side

Italy
Italy
Forest
Forest
Mountains
Mountains

Example

.img-container {
  float: left;
  width: 33.33%; /* three containers (use 25% for four, and 50% for two, etc) */
  padding: 5px; /* if you want space between the images */
}

Create Boxes With Equal Heights

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

Fixed Height Boxes (Float)

Box 1

Some content, some content, some content

Box 2

Some content, some content, some content

Some content, some content, some content

Some content, some content, some content

Box 2 இல் அதிக உள்ளடக்கம் உள்ளது, ஆனால் இது வெட்டப்பட்டுள்ளது (overflow: auto).

Example

.box {
  height: 500px;
}

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

Flexible Height Boxes (Flexbox)

Box 1

This is some text to make sure that the content gets really tall. This is some text to make sure that the content gets really tall. This is some text to make sure that the content gets really tall.

Box 2

My height will follow Box 1.

Example

Using Flexbox to create flexible boxes:

.container {
  display: flex;
}

.box {
  flex: 1;
}

💡 உதவிக்குறிப்பு:

CSS Flexbox Layout Module பற்றி எங்கள் CSS Flexbox பாடத்தில் மேலும் படிக்கலாம்.

Navigation Menu

கிடைமட்ட மெனுவை உருவாக்க ஹைப்பர்லிங்குகளின் பட்டியலுடன் float ஐப் பயன்படுத்தலாம்:

Horizontal Navigation Menu using Float

Example

.nav-menu ul {
  list-style-type: none;
}

.nav-menu li {
  float: left;
}

.nav-menu li a {
  display: block;
  padding: 14px 20px;
  text-decoration: none;
}

Exercise

box-sizing பண்பு என்ன செய்கிறது?

❓ box-sizing பண்பு என்ன செய்கிறது?

உறுப்புகளின் நிறத்தை மாற்றுகிறது
✗ தவறு! இது color அல்லது background-color பண்புகளின் பணியாகும்
உறுப்பின் அகலம் மற்றும் உயரம் எவ்வாறு கணக்கிடப்படுகின்றன என்பதை வரையறுக்கிறது
✓ சரி! box-sizing பண்பானது padding மற்றும் border ஐ அகலம்/உயர கணக்கீட்டில் சேர்க்க வேண்டுமா இல்லையா என்பதைக் கட்டுப்படுத்துகிறது
உறுப்புகளை மிதக்க செய்கிறது
✗ தவறு! இது float பண்பின் பணியாகும்
உறுப்புகளின் காண்பித்தலைக் கட்டுப்படுத்துகிறது
✗ தவறு! இது display பண்பின் பணியாகும்

All CSS Float Properties

மிதப்பு தொடர்பான அனைத்து CSS பண்புகளும்:

Property Description
box-sizing உறுப்பின் அகலம் மற்றும் உயரம் எவ்வாறு கணக்கிடப்படுகின்றன என்பதை வரையறுக்கிறது: அவை padding மற்றும் borders ஐ சேர்க்க வேண்டுமா இல்லையா
clear மிதக்கும் உறுப்புக்கு அடுத்ததாக இருக்கும் உறுப்புக்கு என்ன நடக்க வேண்டும் என்பதைக் குறிப்பிடுகிறது
float உறுப்பு இடது, வலது அல்லது எதுவாகவும் மிதக்க வேண்டுமா இல்லையா என்பதைக் குறிப்பிடுகிறது

💡 பயனுள்ள உதவிக்குறிப்புகள்:

1. box-sizing: border-box பயன்படுத்தி padding மற்றும் border ஐ அகலம்/உயர கணக்கீட்டில் சேர்க்கலாம்
2. float: left அல்லது float: right உறுப்புகளை மிதக்க செய்ய பயன்படுகிறது
3. clear: both பயன்படுத்தி அனைத்து மிதப்புகளையும் தெளிவாக்க முடியும்
4. நவீன தளவமைப்புகளுக்கு flexbox அல்லது grid float ஐ விட சிறந்த விருப்பங்களாக இருக்கலாம்