CSS இல் இரண்டு டிவ்களை அருகருகே வைக்க 3 எளிய வழிகள்

• பயன்படுத்தி ' கட்டம் ”
• பயன்படுத்தி ' நெகிழ்வு ”
• பயன்படுத்தி ' மிதவை ”

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

எனவே, தொடங்குவோம்!

முறை 1: கட்டத்தைப் பயன்படுத்தி CSS இல் இரண்டு டிவ்களை அருகருகே வைக்கவும்

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

தொடரியல்

கட்ட அமைப்புடன் கூடிய காட்சி சொத்தின் தொடரியல் கீழே கொடுக்கப்பட்டுள்ளது:

இப்போது, ​​கிரிட் அமைப்பைப் பயன்படுத்தி CSS இல் இரண்டு டிவ்களை அருகருகே வைப்பது தொடர்பான உதாரணத்தைப் பார்க்கலாம்.

உதாரணமாக

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

CSS பிரிவில் அடுத்து, '' ஐப் பயன்படுத்தவும் .பெற்றோர் 'பெற்றோர் டிவியை அணுகவும் மற்றும் காட்சி சொத்தின் மதிப்பை அமைக்கவும்' கட்டம் ”. அடுத்து, '' ஐப் பயன்படுத்தி பின்னத்தை அமைக்கவும் கட்டம்-வார்ப்புரு-நெடுவரிசைகள் நெடுவரிசைகளுக்கான இடத்தை உருவாக்குவதற்கான சொத்து. எங்கள் விஷயத்தில், பின்னங்களை இவ்வாறு அமைப்போம் 1fr 'மற்றும்' 1fr ”, அதாவது இரண்டு பிரிவுகளும் சம இடத்தைப் பெற்றுள்ளன. மேலும், நெடுவரிசை-இடைப் பண்புகளைப் பயன்படுத்தி இரண்டு நெடுவரிசைகளுக்கு இடையிலான இடைவெளியை அமைத்து அதன் மதிப்பை “ 25px ”.

CSS:

அடுத்த கட்டத்தில், நாங்கள் பயன்படுத்துகிறோம் ' .குழந்தை 'குழந்தை பிரிவு இரண்டையும் அணுகவும் மற்றும் divகளின் உயரத்தை அமைக்கவும்' 250px ” மற்றும் பின்புல நிறத்தை “ என அமைக்கவும் rgb(253, 5, 109) ”:

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

பக்கவாட்டில் div வைக்க மற்றொரு முறைக்கு செல்லலாம்

முறை 2: ஃப்ளெக்ஸைப் பயன்படுத்தி CSS இல் இரண்டு டிவ்களை அருகருகே வைக்கவும்

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

தொடரியல்

ஃப்ளெக்ஸுடன் கூடிய காட்சி சொத்தின் தொடரியல் கீழே கொடுக்கப்பட்டுள்ளது:

கூறப்பட்ட கருத்தை புரிந்து கொள்ள உதாரணத்திற்கு செல்லலாம்.

உதாரணமாக

நாங்கள் அதே HTML கோப்பைப் பரிசீலித்து விண்ணப்பிக்கிறோம் ' நெகிழ்வு ” பெற்றோர் கொள்கலனுக்கு. இங்கே, காட்சி சொத்தின் மதிப்பை ஃப்ளெக்ஸாக அமைப்போம் மற்றும் குழந்தை பிரிவுகளுக்கு இடையே உள்ள இடைவெளியை ' 10px ”:

அதன் பிறகு, div இன் அகலம், உயரம் மற்றும் பின்னணி வண்ணத்தை ' 650px ”,” 200px ”, மற்றும் 'rgb(0, 255, 42) ', முறையே:

கொடுக்கப்பட்ட குறியீட்டின் முடிவு கீழே கொடுக்கப்பட்டுள்ளது:

முறை 3: மிதவையைப் பயன்படுத்தி CSS இல் இரண்டு டிவ்களை அருகருகே வைக்கவும்

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

தொடரியல்

மிதவை சொத்தின் தொடரியல்:

மேலே கொடுக்கப்பட்ட மதிப்புகளுக்கான விளக்கம் இங்கே:

• எதுவும் இல்லை: மிதப்பதைக் கட்டுப்படுத்த இது பயன்படுகிறது.
• விட்டு: இது இடது பக்கத்தில் உள்ள உறுப்புகளை மிதக்கப் பயன்படுகிறது.
• வலது: உறுப்புகளை வலது பக்கத்தில் மிதக்க இது பயன்படுகிறது.

அருகருகே div வைப்பதற்கான உதாரணத்திற்கு செல்லலாம்.

உதாரணமாக

இப்போது, ​​ குறிச்சொல்லின் உள்ளே இரண்டு divகளை உருவாக்கி வகுப்பின் பெயரை “ என ஒதுக்குவோம். div1 'மற்றும்' div2 ”:

பின்னர், பயன்படுத்தவும் ' .div1 'மற்றும்' .div2 ” HTML பிரிவில் சேர்க்கப்பட்ட கொள்கலன்களை அணுக. இரண்டிற்கும் நாம் ஒதுக்கப்போகும் பண்புகள் மற்றும் மதிப்புகள் ஒரே வகுப்பில் இருப்பதால், இரண்டு divகளையும் ஒரே வகுப்பில் பயன்படுத்துவோம்.

அடுத்து, மிதவை சொத்தின் மதிப்பை ' விட்டு 'மற்றும் div இன் அகலம் மற்றும் உயரத்தை அமைக்கவும்' ஐம்பது% 'மற்றும்' 40% ”. பெட்டி-அளவிலான சொத்தை நாங்கள் பயன்படுத்துகிறோம் மற்றும் அதன் மதிப்பை ' எல்லைப் பெட்டி ”. மேலும், div இன் பின்னணி நிறத்தை ' rgb(7, 255, 222) மற்றும் எல்லைச் சொத்தின் மதிப்புகளை இவ்வாறு அமைக்கவும் 3px ”,” திடமான ', மற்றும் ' rgb(255, 0, 255) ”:

குறிப்பு: வெவ்வேறு பின்னணி வண்ணங்களை அமைப்பதன் மூலம், பாக்ஸ்-அளவிலான சொத்து மற்றும் பார்டர் சொத்தை பயன்படுத்தாமல் நீங்கள் இரண்டு பகுதிகளை அருகருகே வைக்கலாம்.

மேலே உள்ள குறியீட்டை நீங்கள் செயல்படுத்தியதும், HTML கோப்பை இயக்கி, முடிவைப் பார்க்கவும்:

குறிப்பு: இரண்டு பிரிவுகளுக்கு இடையில் ஒரு இடைவெளியை உருவாக்க, முதலில் மற்றொரு div ஐ உருவாக்கவும், பின்னர் div இன் விளிம்பை அதற்கேற்ப அமைக்கவும்.

முடிவுரை

CSS இன் மூன்று வெவ்வேறு முறைகளைப் பயன்படுத்தி Div களை அருகருகே வைக்கலாம், அவை ' நெகிழ்வு 'மற்றும்' கட்டம் 'காட்சி சொத்தின் மதிப்புகள் மற்றும்' மிதவை ”சொத்து. ஒவ்வொரு முறையும் திறமையாக வேலை செய்கிறது; இருப்பினும், எங்கள் தேவைகளுக்கு ஏற்ப நீங்கள் அவற்றில் ஏதேனும் ஒன்றைப் பயன்படுத்தலாம். இந்த வழிகாட்டியில், CSS ஐப் பயன்படுத்தி, பக்கவாட்டாக div வைப்பதற்கான மூன்று முறைகளைப் பற்றி விவாதித்தோம் மற்றும் தொடர்புடைய எடுத்துக்காட்டுகளை வழங்கியுள்ளோம்.