ಸಿಎಸ್ಎಸ್ ಫ್ಲೋಟ್ ಅಂಡರ್ಸ್ಟ್ಯಾಂಡಿಂಗ್

ವೆಬ್ ಪುಟ ವಿನ್ಯಾಸಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಲು ಸಿಎಸ್ಎಸ್ ಫ್ಲೋಟ್ ಆಸ್ತಿ ಬಳಸಿ

ಸಿಎಸ್ಎಸ್ ಗುಣಲಕ್ಷಣವು ಲೇಔಟ್ಗಾಗಿ ಬಹಳ ಮುಖ್ಯ ಆಸ್ತಿಯಾಗಿದೆ. ನಿಮ್ಮ ವೆಬ್ ಪೇಜ್ ವಿನ್ಯಾಸಗಳನ್ನು ಅವರು ಪ್ರದರ್ಶಿಸಲು ಬಯಸುವಂತೆಯೇ ಅದನ್ನು ನೀವು ಸ್ಥಾನಾಂತರಿಸಲು ಅನುಮತಿಸುತ್ತದೆ-ಆದರೆ ಅದು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನೀವು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕು.

ಒಂದು ಶೈಲಿಯ ಹಾಳೆಯಲ್ಲಿ, ಸಿಎಸ್ಎಸ್ ಫ್ಲೋಟ್ ಆಸ್ತಿ ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:

ಬಲ; ಫ್ಲೋಟ್: ಬಲ; }

"ಬಲ" ದ ವರ್ಗವನ್ನು ಹೊಂದಿರುವ ಎಲ್ಲವನ್ನೂ ಬಲಕ್ಕೆ ತಳ್ಳಬೇಕು ಎಂದು ಬ್ರೌಸರ್ ಹೇಳುತ್ತದೆ.

ನೀವು ಈ ರೀತಿ ನಿಯೋಜಿಸಬಹುದು:

ವರ್ಗ = "ಬಲ" />

ಸಿಎಸ್ಎಸ್ ಫ್ಲೋಟ್ ಆಸ್ತಿಯೊಂದಿಗೆ ನೀವು ಏನು ಮಾಡಬಹುದು?

ನೀವು ಪ್ರತಿ ಅಂಶವನ್ನು ವೆಬ್ ಪುಟದಲ್ಲಿ ತೇಲುವಂತಿಲ್ಲ. ನೀವು ಬ್ಲಾಕ್-ಮಟ್ಟದ ಅಂಶಗಳನ್ನು ಮಾತ್ರ ತೇಲುತ್ತಾರೆ. ಚಿತ್ರಗಳು (), ಪ್ಯಾರಾಗಳು (), ವಿಭಾಗಗಳು (), ಮತ್ತು ಪಟ್ಟಿಗಳು () ನಂತಹ ಪುಟದಲ್ಲಿನ ಜಾಗವನ್ನು ನಿರ್ಬಂಧಿಸುವ ಅಂಶಗಳು ಇವುಗಳಾಗಿವೆ.

ಪಠ್ಯವನ್ನು ಪರಿಣಾಮ ಬೀರುವ ಇತರ ಅಂಶಗಳು, ಆದರೆ ಪುಟದಲ್ಲಿ ಬಾಕ್ಸ್ ಅನ್ನು ರಚಿಸಬೇಡಿ ಇನ್ಲೈನ್ ​​ಅಂಶಗಳು ಮತ್ತು ತೇಲುವಂತಿಲ್ಲ. ಇವುಗಳೆಂದರೆ span (), ಸಾಲು ವಿರಾಮಗಳು (), ಬಲವಾದ ಒತ್ತು (), ಅಥವಾ ಇಟಾಲಿಕ್ ().

ಅವರು ಎಲ್ಲಿ ಫ್ಲೋಟ್ ಮಾಡುತ್ತಾರೆ?

ನೀವು ಬಲ ಅಥವಾ ಎಡಕ್ಕೆ ಅಂಶಗಳನ್ನು ತೇಲುತ್ತದೆ. ತೇಲಿರುವ ಅಂಶವನ್ನು ಅನುಸರಿಸುವ ಯಾವುದೇ ಅಂಶವು ಇತರ ಭಾಗದಲ್ಲಿ ತೇಲುವ ಅಂಶದ ಸುತ್ತ ಹರಿಯುತ್ತದೆ.

ಉದಾಹರಣೆಗೆ, ನಾನು ಎಡಕ್ಕೆ ಚಿತ್ರವೊಂದನ್ನು ತೇಲುತ್ತಿದ್ದಲ್ಲಿ, ಅದು ಕೆಳಗಿನ ಯಾವುದೇ ಪಠ್ಯ ಅಥವಾ ಇತರ ಅಂಶಗಳು ಅದರ ಸುತ್ತಲೂ ಹರಿಯುತ್ತದೆ. ಮತ್ತು ನಾನು ಚಿತ್ರಕ್ಕೆ ಬಲಕ್ಕೆ ತೇಲಿ ಹೋದರೆ, ಯಾವುದೇ ಪಠ್ಯ ಅಥವಾ ಇತರ ಅಂಶಗಳು ಅದರ ಸುತ್ತಲೂ ಎಡಕ್ಕೆ ಹರಿಯುತ್ತದೆ. ಬ್ರೌಸರ್ಗೆ ಅನ್ವಯಿಸಲಾದ ಯಾವುದೇ ಫ್ಲೋಟ್ ಶೈಲಿ ಇಲ್ಲದೆಯೇ ಪಠ್ಯದ ಒಂದು ಬ್ಲಾಕ್ನಲ್ಲಿ ಇರಿಸಲಾಗಿರುವ ಚಿತ್ರವು ಬ್ರೌಸರ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಲು ಹೊಂದಿಸಲಾಗಿದೆ.

ಚಿತ್ರದ ಕೆಳಭಾಗದಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲಾದ ಪಠ್ಯದ ಮೊದಲ ಸಾಲಿನೊಂದಿಗೆ ಇದು ಸಾಮಾನ್ಯವಾಗಿರುತ್ತದೆ.

ಅವರು ಎಷ್ಟು ಫ್ಲೋಟ್ ಆಗುತ್ತಾರೆ?

ತೇಲಾಡಲಾದ ಒಂದು ಅಂಶವು ಸಾಧ್ಯವಾದಷ್ಟು ಧಾರಕ ಅಂಶದ ಎಡ ಅಥವಾ ಬಲಕ್ಕೆ ಚಲಿಸುತ್ತದೆ. ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಹೇಗೆ ಬರೆಯಲಾಗಿದೆ ಎನ್ನುವುದನ್ನು ಅವಲಂಬಿಸಿ ಇದು ಹಲವಾರು ವಿಭಿನ್ನ ಸಂದರ್ಭಗಳಲ್ಲಿ ಕಂಡುಬರುತ್ತದೆ.

ಈ ಉದಾಹರಣೆಗಳಿಗಾಗಿ, ನಾನು ಸಣ್ಣ DIV ಅಂಶವನ್ನು ಎಡಕ್ಕೆ ತೇಲುತ್ತಿರುವೆನು:

• ತೇಲಿರುವ ಅಂಶವು ಪೂರ್ವ ನಿರ್ಧಾರಿತ ಅಗಲವನ್ನು ಹೊಂದಿಲ್ಲದಿದ್ದರೆ, ಅದು ಫ್ಲೋಟ್ನ ಹೊರತಾಗಿಯೂ, ಅಗತ್ಯವಿರುವ ಮತ್ತು ಲಭ್ಯವಿರುವಂತೆ ಹೆಚ್ಚು ಸಮತಲ ಜಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ಗಮನಿಸಿ: ಅಗಲವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸದಿದ್ದಾಗ ತೇಲುವ ಅಂಶಗಳ ಪಕ್ಕದಲ್ಲಿ ಅಂಶಗಳನ್ನು ಇರಿಸಲು ಕೆಲವು ಬ್ರೌಸರ್ಗಳು ಪ್ರಯತ್ನಿಸುತ್ತವೆ - ಸಾಮಾನ್ಯವಾಗಿ ತೇಲುವ ಅಂಶವನ್ನು ಕೇವಲ ಒಂದು ಸಣ್ಣ ಜಾಗವನ್ನು ಮಾತ್ರ ನೀಡುತ್ತದೆ. ಆದ್ದರಿಂದ ನೀವು ಯಾವಾಗಲೂ ತೇಲುವ ಅಂಶಗಳ ಮೇಲೆ ಅಗಲವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬೇಕು .
• ಕಂಟೇನರ್ ಎಲಿಮೆಂಟ್ ಎಚ್ಟಿಎಮ್ಎಲ್ ಎಲಿಮೆಂಟ್ ಆಗಿದ್ದರೆ, ತೇಲುವ DIV ಪುಟದ ಎಡ ಅಂಚಿನಲ್ಲಿರುತ್ತದೆ.
• ಕಂಟೇನರ್ ಎಲಿಮೆಂಟ್ ಸ್ವತಃ ಯಾವುದಾದರೂ ಒಂದು ವೇಳೆ ಒಳಗೊಂಡಿರುತ್ತದೆ, ತೇಲುವ DIV ಕಂಟೇನರ್ನ ಎಡ ಅಂಚಿನಲ್ಲಿ ಕುಳಿತುಕೊಳ್ಳುತ್ತದೆ.
• ನೀವು ಗೂಡಿನ ತೇಲುವ ಅಂಶಗಳನ್ನು ಮಾಡಬಹುದು, ಮತ್ತು ಅದು ಆಶ್ಚರ್ಯಕರ ಸ್ಥಳದಲ್ಲಿ ಕೊನೆಗೊಳ್ಳುವ ಫ್ಲೋಟ್ಗೆ ಕಾರಣವಾಗಬಹುದು. ಉದಾಹರಣೆಗೆ, ಈ ಫ್ಲೋಟ್ ಎಡ ತೇಲುವ DIV ಆಗಿದೆ, ಅದು ಬಲ ತೇಲಿರುವ DIV ನಲ್ಲಿದೆ.
• ಕಂಟೇನರ್ನಲ್ಲಿ ಕೋಣೆಯಲ್ಲಿ ಇದ್ದರೆ ಫ್ಲೋಟೆಡ್ ಅಂಶಗಳು ಪರಸ್ಪರರ ಮುಂದೆ ಕುಳಿತುಕೊಳ್ಳುತ್ತವೆ. ಉದಾಹರಣೆಗೆ, ಈ ಕಂಟೇನರ್ 400px ವಿಶಾಲ ಕಂಟೇನರ್ನಲ್ಲಿ ಮೂರು 100px ಅಗಲವಾದ DIV ಅಂಶಗಳನ್ನು ಹೊಂದಿರುತ್ತದೆ.

ಫೋಟೋ ಗ್ಯಾಲರಿ ವಿನ್ಯಾಸವನ್ನು ರಚಿಸಲು ನೀವು ಫ್ಲೋಟ್ಗಳನ್ನು ಸಹ ಬಳಸಬಹುದು. DIV ನಲ್ಲಿನ ಶೀರ್ಷಿಕೆ ಮತ್ತು ಫ್ಲೋಟ್ DIV ಎಲಿಮೆಂಟ್ಗಳಲ್ಲಿ ಪ್ರತಿ ಥಂಬ್ನೇಲ್ ಅನ್ನು (ಅವು ಒಂದೇ ಗಾತ್ರದಲ್ಲಿರುವಾಗ ಅದು ಅತ್ಯುತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ).

ಬ್ರೌಸರ್ ವಿಂಡೋ ಎಷ್ಟು ವಿಶಾಲವಾಗಿದ್ದರೂ, ಚಿಕ್ಕಚಿತ್ರಗಳನ್ನು ಏಕರೂಪವಾಗಿ ಸಮನಾಗಿರುತ್ತದೆ.

ಫ್ಲೋಟ್ ಆಫ್ ಟರ್ನಿಂಗ್

ಫ್ಲೋಟ್ ಮಾಡಲು ಅಂಶವನ್ನು ಹೇಗೆ ಪಡೆಯುವುದು ಎಂದು ನಿಮಗೆ ತಿಳಿದ ನಂತರ, ಫ್ಲೋಟ್ ಅನ್ನು ಹೇಗೆ ಆಫ್ ಮಾಡುವುದು ಎನ್ನುವುದು ಮುಖ್ಯವಾಗಿರುತ್ತದೆ. ನೀವು ಸಿಎಸ್ಎಸ್ ಸ್ಪಷ್ಟ ಆಸ್ತಿಯೊಂದಿಗೆ ಫ್ಲೋಟ್ ಅನ್ನು ಆಫ್ ಮಾಡಿ. ನೀವು ಎಡ ಫ್ಲೋಟ್ಗಳು, ಬಲ ಫ್ಲೋಟ್ಗಳು ಅಥವಾ ಎರಡನ್ನೂ ತೆರವುಗೊಳಿಸಬಹುದು:

ಸ್ಪಷ್ಟ: ಎಡ;
ಸ್ಪಷ್ಟ: ಸರಿ;
ಸ್ಪಷ್ಟ: ಎರಡೂ;

ನೀವು ಸ್ಪಷ್ಟ ಆಸ್ತಿಯನ್ನು ಹೊಂದಿಸಿದ ಯಾವುದೇ ಅಂಶವು ಆ ದಿಕ್ಕನ್ನು ತೇಲುವ ಅಂಶಕ್ಕಿಂತ ಕೆಳಗಿರುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಈ ಉದಾಹರಣೆಯಲ್ಲಿ ಪಠ್ಯದ ಮೊದಲ ಎರಡು ಪ್ಯಾರಾಗಳು ತೆರವುಗೊಂಡಿಲ್ಲ, ಆದರೆ ಮೂರನೆಯದು.

ವಿವಿಧ ವಿನ್ಯಾಸ ಪರಿಣಾಮಗಳನ್ನು ಪಡೆಯಲು ನಿಮ್ಮ ಡಾಕ್ಯುಮೆಂಟ್ಗಳಲ್ಲಿನ ವಿಭಿನ್ನ ಅಂಶಗಳ ಸ್ಪಷ್ಟ ಮೌಲ್ಯದೊಂದಿಗೆ ಪ್ಲೇ ಮಾಡಿ.

ಅತ್ಯಂತ ಆಸಕ್ತಿದಾಯಕ ತೇಲುವ ಚೌಕಟ್ಟಿನಲ್ಲಿ ಒಂದಾಗಿದೆ ಪಠ್ಯದ ಪ್ಯಾರಾಗಳು ಮುಂದಿನ ಬಲ ಅಥವಾ ಎಡ ಕಾಲಮ್ ಕೆಳಗೆ ಚಿತ್ರಗಳ ಸರಣಿ. ಚಿತ್ರದ ಹಿಂದೆ ಸ್ಕ್ರಾಲ್ ಮಾಡಲು ಪಠ್ಯವು ಸಾಕಷ್ಟು ಉದ್ದವಿಲ್ಲದಿದ್ದರೂ ಸಹ, ಹಿಂದಿನ ಚಿತ್ರದ ಪಕ್ಕದಲ್ಲಿರುವ ಬದಲಾಗಿ ಅವರು ಕಾಲಮ್ನಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಎಲ್ಲಾ ಚಿತ್ರಗಳನ್ನು ಸ್ಪಷ್ಟಪಡಿಸಬಹುದು.

HTML (ಈ ಪ್ಯಾರಾಗ್ರಾಫ್ ಪುನರಾವರ್ತಿಸಿ):

ಡುಯಿಸ್ ಆಟ್ ಐರೆರ್ ಡೋಲರ್ ಆದರೆ ಈಯುಮೊಡ್ ಟೆಂಪೋರ್ ಡು ದಟ್ ರಿಪ್ರೆಹೆಂಡರ್ ಇನ್ ರಿಪ್ಲೇಟೇಟ್ ಇನ್ ವಲ್ಯುಪೇಟ್. ಕ್ಯುಪಿಡ್ಯಾಟ್ ಅವರು ಕೆಲಸ ಮತ್ತು ಕೆಲವು ದೊಡ್ಡ ಕೆಲಸ ಮಾಡಲು ಸಾಧ್ಯವಿಲ್ಲ.

ಸಿಎಸ್ಎಸ್ (ಎಡಕ್ಕೆ ಚಿತ್ರಗಳನ್ನು ತೇಲಾಡುವುದು):

img.float {ಫ್ಲೋಟ್: ಎಡ;
ಸ್ಪಷ್ಟ: ಎಡ;
ಅಂಚು: 5 px;
}

ಮತ್ತು ಬಲಕ್ಕೆ:

img.float {float: right;
ಸ್ಪಷ್ಟ: ಸರಿ;
ಅಂಚು: 5 px;
}

ಲೇಔಟ್ಗಾಗಿ ಫ್ಲೋಟ್ಗಳನ್ನು ಬಳಸುವುದು

ಫ್ಲೋಟ್ ಆಸ್ತಿ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನೀವು ಒಮ್ಮೆ ಅರ್ಥಮಾಡಿಕೊಂಡಾಗ, ನಿಮ್ಮ ವೆಬ್ ಪುಟಗಳನ್ನು ಬಿಡಿಸಲು ನೀವು ಇದನ್ನು ಬಳಸಿಕೊಳ್ಳಬಹುದು. ತೇಲಿಹೋದ ವೆಬ್ ಪುಟವನ್ನು ರಚಿಸಲು ನಾನು ತೆಗೆದುಕೊಳ್ಳುವ ಹಂತಗಳು ಹೀಗಿವೆ:

• ವಿನ್ಯಾಸವನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಿ (ಕಾಗದದ ಮೇಲೆ ಅಥವಾ ಗ್ರಾಫಿಕ್ಸ್ ಸಾಧನದಲ್ಲಿ ಅಥವಾ ನನ್ನ ತಲೆಯಲ್ಲಿ).
• ಪುಟ ವಿಭಾಗಗಳು ಎಲ್ಲಿವೆ ಎಂದು ನಿರ್ಧರಿಸುವುದು.
• ವಿವಿಧ ಧಾರಕಗಳ ಅಗಲ ಮತ್ತು ಅವುಗಳೊಳಗಿನ ಅಂಶಗಳನ್ನು ನಿರ್ಧರಿಸಿ.
• ಎಲ್ಲವೂ ಫ್ಲೋಟ್ ಮಾಡಿ. ಹೊರಗಿನ ಕಂಟೇನರ್ ಎಲಿಮೆಂಟ್ ಸಹ ಎಡಕ್ಕೆ ತೇಲಾಡಲ್ಪಟ್ಟಿರುವುದರಿಂದ ಬ್ರೌಸರ್ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ನಾನು ಎಲ್ಲಿದೆ ಎಂದು ನನಗೆ ತಿಳಿದಿದೆ.

ನಿಮ್ಮ ಲೇಔಟ್ ವಿಭಾಗಗಳ ಅಗಲಗಳನ್ನು (ಶೇಕಡಾವಾರು ಉತ್ತಮವಾಗಿವೆ) ನಿಮಗೆ ತಿಳಿದಿರುವ ತನಕ, ನೀವು ಪುಟದಲ್ಲಿ ಸೇರಿರುವ ಸ್ಥಳವನ್ನು ಹಾಕಲು ಫ್ಲೋಟ್ ಆಸ್ತಿ ಬಳಸಿ. ಮತ್ತು ಒಳ್ಳೆಯದು, ನೀವು ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ ಅಥವಾ ಫೈರ್ಫಾಕ್ಸ್ಗೆ ವಿಭಿನ್ನವಾಗಿರುವ ಬಾಕ್ಸ್ ಮಾದರಿಯ ಬಗ್ಗೆ ಹೆಚ್ಚು ಚಿಂತಿಸಬೇಕಾಗಿಲ್ಲ.