સીએસએસ ફ્લોટ સમજવું

સીએસએસ ફ્લોટ નો ઉપયોગ કરીને વેબ પૃષ્ઠ લેઆઉટ ડિઝાઇન કરવા માટેની સંપત્તિ

સીએસએસ પ્રોપર્ટી લેઆઉટ માટે ખૂબ મહત્વની મિલકત છે. તે તમને તમારા વેબ પૃષ્ઠની ડિઝાઇનને બરાબર ગોઠવવાની મંજૂરી આપે છે, જેમ કે તમે તેને પ્રદર્શિત કરવા માંગો છો- પરંતુ તેનો ઉપયોગ કરવા માટે તમારે તે કેવી રીતે કાર્ય કરવું તે સમજવું પડશે.

સ્ટાઇલશીટમાં, CSS ફ્લોટ પ્રોપર્ટી આના જેવી દેખાય છે:

.right {ફ્લોટ: અધિકાર; }

આ બ્રાઉઝરને કહે છે કે "જમણે" ના વર્ગ સાથેની દરેક વસ્તુ જમણી બાજુએ શરૂ થવી જોઈએ.

તમે તેને આના જેવું સોંપો કરશો:

વર્ગ = "અધિકાર" />

તમે સીએસએસ ફ્લોટ સંપત્તિ સાથે શું ફ્લોટ કરી શકો છો?

તમે દરેક પૃષ્ઠને વેબ પેજ પર ફ્લોટ કરી શકતા નથી. તમે ફક્ત બ્લોક-સ્તરનાં તત્વો ફ્લોટ કરી શકો છો. આ એવા ઘટકો છે કે જે પૃષ્ઠ પર જગ્યાના બ્લોકનો ઉપયોગ કરે છે, જેમ કે છબીઓ (), ફકરા (), વિભાગો (), અને યાદીઓ ().

અન્ય ઘટકો કે જે ટેક્સ્ટને અસર કરે છે, પરંતુ પૃષ્ઠ પર બૉક્સ બનાવતા નથી તેને ઇનલાઇન તત્વો કહેવામાં આવે છે અને શરૂ થઈ શકતું નથી. આ સ્પાન () જેવા ઘટકો છે, રેખા બ્રેક્સ (), મજબૂત ભાર (), અથવા ઇટાલિકો ().

તેઓ ક્યાં રહે છે?

તમે જમણા અથવા ડાબે તત્વોને ફ્લોટ કરી શકો છો કોઈ પણ તત્વ કે જે ત્રાહિત તત્વને અનુસરે છે તે બીજા બાજુએ શરૂ કરેલ તત્વની આસપાસ ફરતા હશે.

ઉદાહરણ તરીકે, જો હું ડાબી બાજુ એક છબીને ફ્લોટ કરું છું, તો કોઈ ટેક્સ્ટ અથવા તેના પછીના અન્ય ઘટકો તેની આસપાસ જમણી બાજુએ ફરશે. અને જો હું જમણી બાજુ પરની છબીને ફ્લોટ કરું છું, તો કોઈ ટેક્સ્ટ અથવા તેના નીચેના અન્ય ઘટકો તેની આજુબાજુ ડાબેથી ફરતા રહેશે. એવી છબી જે કોઈ પણ ફ્લોટ શૈલી વગર ટેક્સ્ટના બ્લોકમાં મૂકવામાં આવે છે જે તે પર પ્રદર્શિત થાય છે, જો કે બ્રાઉઝર છબીઓ પ્રદર્શિત કરવા માટે સેટ કરેલું છે.

આ સામાન્ય રીતે છબીના તળિયે પ્રદર્શિત કરેલા નીચેના ટેક્સ્ટની પ્રથમ લાઇન સાથે છે.

તેઓ કેવી રીતે ફ્લોટ કરશે?

એક તત્વ કે જે શરૂ કરવામાં આવ્યું છે તે કન્ટેનર એલિમેન્ટની ડાબે અથવા જમણે સુધી ખસેડી શકે છે. આ તમારા કોડ લખે છે તેના આધારે કેટલીક જુદી જુદી પરિસ્થિતિઓમાં પરિણમે છે.

આ ઉદાહરણો માટે, હું ડાબી બાજુએ એક નાનકડા DIV તત્વને ફ્લોટ કરીશ:

• જો શરૂ કરેલ તત્વમાં પૂર્વ-નિર્ધારિત પહોળાઈ નથી, તો તે ફ્લોટની અનુલક્ષીને, જરૂરી અને ઉપલબ્ધ હોવા જેટલી વધુ આડી જગ્યા લેશે. નોંધ: કેટલાક બ્રાઉઝર્સ ઉભા કરાયેલા ઘટકોની બાજુમાં ઘટકો મૂકવાનો પ્રયાસ કરે છે જ્યારે પહોળાઈ નિર્ધારિત નથી - સામાન્ય રીતે બિન-ફલોડાવાળી તત્વને માત્ર નાની જગ્યાની જગ્યા આપવી. તેથી તમે હંમેશા શરૂ તત્વો પર પહોળાઈ વ્યાખ્યાયિત કરવું જોઈએ.
• જો કન્ટેનર એલિમેન્ટ એ HTML એલિમેન્ટ છે, તો શરૂ કરેલ DIV પૃષ્ઠની ડાબી હાજરી પર બેસશે.
• જો કન્ટેનર એલિમેન્ટ પોતે બીજું કંઇ જ સમાયેલ હોય, તો શરૂ કરેલ DIV કન્ટેનરની ડાબી હાજરી પર બેસશે.
• તમે માળામાં ઉતર્યા તત્વો કરી શકો છો, અને તે એક આશ્ચર્યજનક સ્થાને સમાપ્ત થતાં ફ્લોટમાં પરિણમી શકે છે. ઉદાહરણ તરીકે, આ ફ્લોટ જમણા ડાબા DIV ની અંદર ડાબેરી ડાબા DIV છે.
• જો કંટેનરમાં જગ્યા હોય તો ફ્લોટેડ તત્વો એકબીજા બાજુમાં બેસશે. ઉદાહરણ તરીકે, આ કન્ટેનરમાં 400px વિશાળ કન્ટેનરમાં ત્રણ 100px વિશાળ DIV તત્વો છે.

ફોટો ગેલેરી લેઆઉટ બનાવવા માટે તમે ફ્લોટ્સ પણ વાપરી શકો છો. તમે દરેક થંબનેલ (તે બધા જ કદના હોય ત્યારે શ્રેષ્ઠ કામ કરે છે) કે જે કૅપ્શન સાથે DIV માં અને કન્ટેનરમાં DIV ઘટકોને ફ્લોટ કરે છે.

બ્રાઉઝર વિંડો કેટલું વિશાળ છે તે કોઈ બાબત નથી, થંબનેલ્સ એકસરખી રીતે રેખા કરશે.

ફ્લોટ બંધ કરી દેવાનો

એકવાર તમે જાણો છો કે ફ્લોટ માટે તત્વ કેવી રીતે મેળવવું, તે જાણવું મહત્વનું છે કે ફ્લોટ કેવી રીતે બંધ કરવું. તમે સીએસએસ સ્પષ્ટ મિલકત સાથે ફ્લોટ બંધ કરો. તમે ડાબી ફ્લોટ્સ, જમણા ફ્લોટ્સ અથવા બન્નેને સાફ કરી શકો છો:

સ્પષ્ટ: ડાબે;
સ્પષ્ટ: અધિકાર;
સ્પષ્ટ: બંને;

કોઈપણ ઘટક કે જે તમે માટે સ્પષ્ટ મિલકત સુયોજિત કરો છો તે એક ઘટક નીચે દેખાશે જે તે દિશામાં શરૂ કરે છે. ઉદાહરણ તરીકે, આ ઉદાહરણમાં, ટેક્સ્ટના પહેલા બે ફકરા સાફ થઈ ગયા નથી, પરંતુ ત્રીજી છે.

વિવિધ લેઆઉટ પ્રભાવ મેળવવા માટે તમારા દસ્તાવેજોના વિવિધ ઘટકોની સ્પષ્ટ મૂલ્ય સાથે રમો.

સૌથી રસપ્રદ ફ્લોટિંગ લેઆઉટોમાંની એક એ છે કે ટેક્સ્ટના ફકરાઓની બાજુમાં જમણી કે ડાબા કૉલમની નીચે છબીઓની શ્રેણી છે. જો છબી લાંબા સમય સુધી છબીને સ્ક્રોલ કરવા માટે પૂરતો નથી, તો તમે તેની ખાતરી કરવા માટે તમામ ઈમેજો પર સ્પષ્ટ ઉપયોગ કરી શકો છો કે તેઓ અગાઉના છબીની આગળના બદલે સ્તંભમાં દેખાય છે.

HTML (આ ફકરાને પુનરાવર્તન કરો):

જુદી જુદી કારણોને લીધે, પરંતુ તે સમયે સ્વયંસંચાલિત સમયે તપાસ કરવામાં આવે છે. કામદાર અને કામદાર તરીકે કામદાર તરીકે કામ કરતા નથી.

CSS (ડાબી બાજુની છબીઓને ફ્લોટ કરવા):

img.float {ફ્લોટ: ડાબે;
સ્પષ્ટ: ડાબે;
માર્જિન: 5 પીએક્સ;
}

અને જમણે:

img.float {ફ્લોટ: અધિકાર;
સ્પષ્ટ: અધિકાર;
માર્જિન: 5 પીએક્સ;
}

લેઆઉટ માટે તવાઓનો ઉપયોગ કરવો

એકવાર તમે ફ્લોટ પ્રોપર્ટી કેવી રીતે કામ કરે છે તે સમજ્યા પછી, તમે તમારા વેબપૃષ્ઠોને મૂકાવવા માટે તેનો ઉપયોગ શરૂ કરી શકો છો. આ શરૂઆતી વેબ પૃષ્ઠ બનાવવા માટેનાં પગલાંઓ છે:

• લેઆઉટને ડિઝાઇન કરો (કાગળ પર અથવા ગ્રાફિક્સ સાધનમાં અથવા મારા માથામાં)
• નક્કી કરો કે પૃષ્ઠ વિભાગો ક્યાં બનશે.
• વિવિધ કન્ટેનરની પહોળાઈ અને તેમના અંદરના ઘટકો નક્કી કરો.
• બધું ફ્લોટ કરો બાહ્યતમ કન્ટેનર તત્વ પણ ડાબેથી શરૂ થાય છે જેથી હું જાણું છું કે તે બ્રાઉઝર દૃશ્ય પોર્ટના સંબંધમાં ક્યાં હશે.

જ્યાં સુધી તમને તમારા લેઆઉટ વિભાગોની પહોળાઈઓ (ટકાવારીઓ દંડ) છે ત્યાં સુધી તમે તેને ફ્લોટ પ્રોપર્ટીનો ઉપયોગ કરી શકો છો જ્યાં તે પૃષ્ઠ પર છે. અને સરસ વસ્તુ એ છે કે ઇન્ટરનેટ એક્સપ્લોરર અથવા ફાયરફોક્સ માટે બોક્સ મોડેલ અલગ હોવા વિશે તમારે ચિંતા કરવાની જરૂર નથી.