CSS ਫਲੋਟ ਨੂੰ ਸਮਝਣਾ

CSS ਫਲੋਟ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਵੈਬ ਪੇਜ ਲੇਆਉਟ ਡਿਜ਼ਾਇਨ ਕਰਨ ਲਈ ਸੰਪੱਤੀ

CSS ਵਿਸ਼ੇਸ਼ਤਾ ਲੇਆਉਟ ਲਈ ਇੱਕ ਬਹੁਤ ਮਹੱਤਵਪੂਰਨ ਸੰਪਤੀ ਹੈ. ਇਹ ਤੁਹਾਨੂੰ ਤੁਹਾਡੇ ਵੈਬ ਪੇਜ ਦੇ ਡਿਜ਼ਾਈਨ ਦੀ ਸਥਿਤੀ ਨੂੰ ਠੀਕ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੀ ਹੈ ਜਿਵੇਂ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਡਿਸਪਲੇ ਕਰਨ- ਪਰ ਇਸ ਨੂੰ ਵਰਤਣ ਲਈ ਤੁਹਾਨੂੰ ਸਮਝਣਾ ਪਵੇਗਾ ਕਿ ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ.

ਸਟਾਈਲ ਸ਼ੀਟ ਵਿਚ, CSS ਫਲੋਟ ਦੀ ਜਾਇਦਾਦ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ:

.right {ਫਲੋਟ: ਸੱਜੇ; }

ਇਹ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਇਹ ਦੱਸਦਾ ਹੈ ਕਿ "ਸੱਜੇ" ਦੇ ਵਰਗ ਨਾਲ ਹਰ ਚੀਜ਼ ਨੂੰ ਸੱਜੇ ਪਾਸੇ ਚਲਾਇਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ

ਤੁਸੀਂ ਇਸ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਦੇ ਦਿਓਗੇ:

class = "ਸੱਜਾ" />

ਤੁਸੀਂ CSS ਫਲੋਟ ਦੀ ਜਾਇਦਾਦ ਦੇ ਨਾਲ ਕੀ ਫਲੈਟ ਕਰ ਸਕਦੇ ਹੋ?

ਤੁਸੀਂ ਕਿਸੇ ਵੈੱਬ ਪੇਜ 'ਤੇ ਹਰੇਕ ਤੱਤ ਫਲੋਟ ਨਹੀਂ ਕਰ ਸਕਦੇ. ਤੁਸੀਂ ਸਿਰਫ ਬਲਾਕ-ਪੱਧਰ ਦੇ ਤੱਤ ਫਲੋਟ ਕਰ ਸਕਦੇ ਹੋ ਇਹ ਉਹ ਤੱਤ ਹਨ ਜੋ ਪੇਜ ਤੇ ਸਪੇਸ ਦੀ ਇੱਕ ਬਲਾਕ ਲੈਂਦੇ ਹਨ, ਜਿਵੇਂ ਕਿ ਚਿੱਤਰ (), ਪੈਰਾਗ੍ਰਾਫ (), ਡਿਵੀਜ਼ਨ (), ਅਤੇ ਸੂਚੀਆਂ ().

ਹੋਰ ਤੱਤ ਜਿਹੜੇ ਪਾਠ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਦੇ ਹਨ, ਪਰ ਪੰਨੇ 'ਤੇ ਕੋਈ ਬਕਸਾ ਨਹੀਂ ਬਣਾਉਂਦੇ ਉਨ੍ਹਾਂ ਨੂੰ ਇਨਲਾਈਨ ਐਲੀਮੈਂਟਸ ਕਿਹਾ ਜਾਂਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਚਾਲੂ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ. ਇਹ ਸਪੈਨ (), ਲਾਈਨ ਬ੍ਰੇਕਸ (), ਮਜ਼ਬੂਤ ​​ਜ਼ੋਰ (), ਜਾਂ ਇਟਾਲਿਕ () ਵਰਗੇ ਤੱਤ ਹਨ.

ਉਹ ਕਿੱਥੇ ਰਹਿੰਦੇ ਹਨ?

ਤੁਸੀਂ ਸੱਜੇ ਜਾਂ ਖੱਬੇ ਪਾਸੇ ਦੇ ਤੱਤਾਂ ਨੂੰ ਫਲੋਟ ਕਰ ਸਕਦੇ ਹੋ ਆਰਜ਼ੀ ਤੱਤ ਦਾ ਪਾਲਣ ਕਰਨ ਵਾਲਾ ਕੋਈ ਵੀ ਤੱਤ, ਦੂਜੇ ਪਾਸੇ ਦੇ ਤਲ ਉੱਤੇ ਖੜ੍ਹਾ ਹੋ ਜਾਵੇਗਾ.

ਉਦਾਹਰਨ ਲਈ, ਜੇ ਮੈਂ ਖੱਬੇ ਪਾਸੇ ਇੱਕ ਚਿੱਤਰ ਨੂੰ ਫਲੋਟ ਕਰਦਾ ਹਾਂ, ਤਾਂ ਇਸਦੇ ਪਿੱਛੇ ਕੋਈ ਪਾਠ ਜਾਂ ਹੋਰ ਤੱਤ ਇਸਦੇ ਆਲੇ-ਦੁਆਲੇ ਫੈਲ ਜਾਣਗੇ ਅਤੇ ਜੇ ਮੈਂ ਸੱਜੇ ਪਾਸੇ ਇੱਕ ਚਿੱਤਰ ਨੂੰ ਫਲੋਟ ਕਰਦਾ ਹਾਂ, ਤਾਂ ਇਸਦੇ ਪਿਛੇ ਕੋਈ ਪਾਠ ਜਾਂ ਹੋਰ ਤੱਤ ਇਸਦੇ ਖੱਬੇ ਪਾਸੇ ਫੈਲਦੇ ਹਨ. ਇੱਕ ਚਿੱਤਰ ਜੋ ਕਿਸੇ ਵੀ ਫਲੋਟ ਸਟਾਈਲ ਦੇ ਬਿਨਾਂ ਪਾਠ ਦੇ ਇੱਕ ਬਲਾਕ ਵਿੱਚ ਰੱਖਿਆ ਗਿਆ ਹੈ ਇਸ ਤੇ ਲਾਗੂ ਹੋਵੇਗਾ ਹਾਲਾਂਕਿ ਬਰਾਊਜ਼ਰ ਚਿੱਤਰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ

ਇਹ ਆਮ ਤੌਰ ਤੇ ਚਿੱਤਰ ਦੇ ਤਲ 'ਤੇ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤੇ ਗਏ ਪਾਠ ਦੀ ਪਹਿਲੀ ਲਾਈਨ ਦੇ ਨਾਲ ਹੁੰਦਾ ਹੈ.

ਉਹ ਕਿੰਨੀ ਦੂਰ ਰਹਿਣਗੇ?

ਇੱਕ ਤੱਤ ਜੋ ਕਿ ਸ਼ੁਰੂ ਹੋ ਚੁੱਕਾ ਹੈ, ਉਹ ਕੰਟੇਨਰ ਦੇ ਤਲ ਦੇ ਖੱਬੇ ਜਾਂ ਸੱਜੇ ਪਾਸੇ ਵੱਲ ਵਧ ਜਾਵੇਗਾ ਜਿਵੇਂ ਕਿ ਇਹ ਹੋ ਸਕਦਾ ਹੈ. ਇਸਦੇ ਸਿੱਟੇ ਵਜੋਂ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਕਿਵੇਂ ਲਿਖਿਆ ਗਿਆ ਹੈ ਇਸਦੇ ਵੱਖਰੇ ਵੱਖਰੇ ਸਥਿਤੀਆਂ ਦਾ ਨਤੀਜਾ ਹੈ.

ਇਹਨਾਂ ਉਦਾਹਰਣਾਂ ਲਈ, ਮੈਂ ਖੱਬੇ ਪਾਸੇ ਇੱਕ ਛੋਟਾ DIV ਐਲੀਮੈਂਟ ਨੂੰ ਫਲੋਟਿੰਗ ਕਰ ਰਿਹਾ ਹਾਂ:

• ਜੇਕਰ ਆਰਜੀ ਤੱਤ ਦੇ ਕੋਲ ਪ੍ਰੀ-ਪ੍ਰਭਾਸ਼ਿਤ ਚੌੜਾਈ ਨਹੀਂ ਹੈ, ਤਾਂ ਇਹ ਫਲੋਟ ਦੀ ਪਰਵਾਹ ਕੀਤੇ ਬਿਨਾਂ ਲੋੜੀਂਦੀ ਅਤੇ ਉਪਲਬਧ ਹੋਣ ਦੇ ਨਾਲ-ਨਾਲ ਬਹੁਤ ਖਿਤਿਜੀ ਸਪੇਸ ਲਵੇਗੀ. ਨੋਟ: ਕੁਝ ਬ੍ਰਾਊਜ਼ਰ ਤਫਸੀਲ ਐਲੀਮੈਂਟਸ ਦੇ ਨਾਲ ਤੱਤ ਰੱਖਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਨ ਜਦੋਂ ਚੌੜਾਈ ਨਿਸ਼ਚਤ ਨਹੀਂ ਹੁੰਦੀ- ਆਮ ਤੌਰ 'ਤੇ ਗੈਰ-ਆਰਜ਼ੀ ਤੱਤ ਐਲੀਮੈਂਟ ਨੂੰ ਥੋੜ੍ਹੀ ਜਿਹੀ ਸਪੇਸ ਦਿੰਦੇ ਹਨ ਇਸ ਲਈ ਤੁਹਾਨੂੰ ਹਮੇਸ਼ਾ ਤਲ਼ੇ ਹੋਏ ਤੱਤਾਂ ਤੇ ਚੌੜਾਈ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ.
• ਜੇਕਰ ਕੰਟੇਨਰ ਦਾ ਤੱਤ HTML ਐਲੀਮੈਂਟ ਹੈ, ਤਾਂ ਆਰੰਭ ਕੀਤਾ DIV ਪੰਨੇ ਦੇ ਖੱਬੇ ਹਾਸ਼ੀਆ ਤੇ ਬੈਠ ਜਾਵੇਗਾ.
• ਜੇਕਰ ਕੰਟੇਨਰ ਤੱਤ ਖੁਦ ਹੀ ਕੁਝ ਹੋਰ ਨਾਲ ਸੰਮਿਲਤ ਹੈ, ਤਾਂ ਆਰੰਭਕ DIV ਕੰਟੇਨਰ ਦੇ ਖੱਬੇ ਹਾਸ਼ੀਏ 'ਤੇ ਬੈਠ ਜਾਵੇਗਾ.
• ਤੁਸੀਂ ਆਲ੍ਹਣਾ ਦੇ ਤੱਤਾਂ ਨੂੰ ਆਕਾਰ ਦੇ ਸਕਦੇ ਹੋ, ਅਤੇ ਇਸ ਦਾ ਨਤੀਜਾ ਫਲੋਟ ਵਿਚ ਇਕ ਹੈਰਾਨੀਜਨਕ ਜਗ੍ਹਾ ਵਿਚ ਹੋ ਸਕਦਾ ਹੈ. ਉਦਾਹਰਨ ਲਈ, ਇਹ ਫਲੋਟ ਇੱਕ ਖੱਬੇ ਪਾਸੇ ਚਲਾਇਆ ਗਿਆ DIV ਇੱਕ ਸਹੀ ਨੀਲਾ ਤਾਰਾ ਦੇ ਅੰਦਰ ਹੈ.
• ਜੇਕਰ ਕੰਟੇਨਰ ਵਿੱਚ ਕਮਰਾ ਹੋਵੇ ਤਾਂ ਤੈਅ ਕੀਤੇ ਤੱਤ ਇਕ-ਦੂਜੇ ਦੇ ਕੋਲ ਬੈਠਣਗੇ. ਉਦਾਹਰਣ ਵਜੋਂ, ਇਸ ਕੰਟੇਨਰ ਕੋਲ 400px ਵਿਸ਼ਾਲ ਕੰਟੇਨਰ ਵਿੱਚ ਤਿੰਨਾਂ 100px ਚੌੜੇ ਡੀਵੀਆਈ ਤੱਤਾਂ ਹਨ.

ਤੁਸੀਂ ਇੱਕ ਫੋਟੋ ਗੈਲਰੀ ਲੇਆਉਟ ਬਣਾਉਣ ਲਈ ਵੀ ਫਲੈਟ ਵਰਤ ਸਕਦੇ ਹੋ. ਤੁਸੀਂ ਹਰ ਇੱਕ ਥੰਬਨੇਲ (ਇਹ ਸਭ ਤੋਂ ਵਧੀਆ ਕੰਮ ਕਰਦੇ ਹੋ ਜਦੋਂ ਉਹ ਸਾਰੇ ਇੱਕੋ ਆਕਾਰ ਹੁੰਦੇ ਹਨ) ਇੱਕ ਡੀ.ਆਈ.ਵੀ. ਵਿੱਚ ਕੈਪਸ਼ਨ ਅਤੇ ਕੰਟੇਨਰ ਵਿੱਚ ਡੀ.ਆਈ.ਵੀ.

ਕੋਈ ਝਲਕ ਨਹੀਂ ਭਾਵੇਂ ਬਰਾਊਜ਼ਰ ਵਿੰਡੋ ਕਿੰਨੀ ਵਿਸ਼ਾਲ ਹੋਵੇ, ਥੰਮਨੇਲ ਇਕਸਾਰ ਰੂਪ ਵਿਚ ਇਕਸਾਰ ਲਾਈਨ ਬਣਾਏਗਾ.

ਫਲੋਟ ਨੂੰ ਬੰਦ ਕਰਨਾ

ਇੱਕ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਤੱਤ ਨੂੰ ਫਲੋਟ ਵਿੱਚ ਲੈਣਾ ਜਾਣਦੇ ਹੋ, ਇਹ ਜਾਣਨਾ ਮਹੱਤਵਪੂਰਣ ਹੈ ਕਿ ਫਲੋਟ ਨੂੰ ਕਿਵੇਂ ਬੰਦ ਕਰਨਾ ਹੈ ਤੁਸੀਂ CSS ਸਪਸ਼ਟ ਸੰਪੱਤੀ ਦੇ ਨਾਲ ਫਲੋਟ ਨੂੰ ਬੰਦ ਕਰ ਦਿੰਦੇ ਹੋ. ਤੁਸੀਂ ਖੱਬੇ ਹੋਏ ਫਲੋਟਾਂ, ਸਹੀ ਫਲੋਟਾਂ ਜਾਂ ਦੋਵਾਂ ਨੂੰ ਸਾਫ਼ ਕਰ ਸਕਦੇ ਹੋ:

ਸਾਫ਼: ਖੱਬੇ;
ਸਾਫ਼: ਸੱਜਾ;
ਸਾਫ਼: ਦੋਵੇਂ;

ਕੋਈ ਵੀ ਤੱਤ, ਜਿਸ ਲਈ ਤੁਸੀਂ ਸਪੱਸ਼ਟ ਪ੍ਰੋਟੈਕਸ਼ਨ ਸੈਟ ਕਰਦੇ ਹੋ, ਉਹ ਇਕ ਤੱਤ ਦੇ ਹੇਠਾਂ ਪ੍ਰਗਟ ਹੋਵੇਗਾ ਜੋ ਉਸ ਦਿਸ਼ਾ ਨੂੰ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ. ਉਦਾਹਰਨ ਲਈ, ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ ਪਾਠ ਦੇ ਪਹਿਲੇ ਦੋ ਪੈਰ੍ਹੇ ਸਾਫ਼ ਨਹੀਂ ਹੁੰਦੇ ਹਨ, ਪਰ ਤੀਜਾ ਹੈ

ਵੱਖ-ਵੱਖ ਲੇਆਊਂਡ ਪ੍ਰਭਾਵਾਂ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਆਪਣੇ ਦਸਤਾਵੇਜ਼ਾਂ ਦੇ ਵੱਖ-ਵੱਖ ਤੱਤਾਂ ਦੇ ਸਪਸ਼ਟ ਮੁੱਲ ਨਾਲ ਚਲਾਓ.

ਸਭ ਤੋਂ ਦਿਲਚਸਪ ਫਲੋਟਿੰਗ ਲੇਆਉਟ ਦਾ ਇੱਕ ਪਾਠ ਦੇ ਪੈਰਿਆਂ ਦੇ ਅੱਗੇ ਸੱਜੇ ਜਾਂ ਖੱਬੇ ਕਾਲਮ ਦੇ ਹੇਠਾਂ ਚਿੱਤਰਾਂ ਦੀ ਇਕ ਲੜੀ ਹੈ. ਭਾਵੇਂ ਚਿੱਤਰ ਥੋੜੇ ਸਮੇਂ ਲਈ ਚਿੱਤਰ ਨੂੰ ਲੰਘਣ ਲਈ ਕਾਫ਼ੀ ਨਹੀਂ ਹੈ, ਤੁਸੀਂ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਸਾਰੇ ਚਿੱਤਰ ਪਿਛਲੇ ਕਾਲਮ ਦੇ ਅੱਗੇ ਨਹੀਂ ਹਨ, ਉਸ ਲਈ ਸਾਰੇ ਚਿੱਤਰਾਂ ਤੇ ਸਪੱਸ਼ਟ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ.

HTML (ਇਸ ਪੈਰਾ ਨੂੰ ਦੁਹਰਾਓ):

ਉਨ੍ਹਾਂ ਨੇ ਕਿਹਾ ਕਿ ਉਹ ਇਕ ਦੂਜੇ ਨਾਲ ਮੁਲਾਕਾਤ ਕਰ ਰਹੇ ਹਨ, ਪਰ ਉਹ ਇਸ ਬਾਰੇ ਕੁਝ ਨਹੀਂ ਦੱਸਦੇ. ਕਿਸੇ ਗੈਰ ਕਾਨੂੰਨੀ ਕੰਮਕਾਜ ਦੇ ਤੌਰ '

CSS (ਖੱਬੇ ਪਾਸੇ ਤਸਵੀਰਾਂ ਨੂੰ ਫਲੋਟ ਕਰਨ ਲਈ):

img.float {ਫਲੋਟ: ਖੱਬੇ;
ਸਾਫ਼: ਖੱਬੇ;
ਹਾਸ਼ੀਆ: 5px;
}

ਅਤੇ ਸੱਜੇ ਪਾਸੇ:

img.float {ਫਲੋਟ: ਸੱਜੇ;
ਸਾਫ਼: ਸੱਜਾ;
ਹਾਸ਼ੀਆ: 5px;
}

ਲੇਆਉਟ ਲਈ ਫਲੈਟਾਂ ਦਾ ਇਸਤੇਮਾਲ ਕਰਨਾ

ਇੱਕ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ ਸਮਝ ਜਾਂਦੇ ਹੋ ਕਿ ਫਲੋਟ ਦੀ ਜਾਇਦਾਦ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਆਪਣੇ ਵੈਬ ਪੇਜਾਂ ਨੂੰ ਦਿਖਾਉਣ ਲਈ ਇਸਦੀ ਵਰਤੋਂ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹੋ. ਇਹ ਉਹ ਕਦਮ ਹਨ ਜੋ ਮੈਂ ਇੱਕ ਆਰਜੀ ਵੈਬ ਪੇਜ ਬਣਾਉਣ ਲਈ ਕਰਦੇ ਹਾਂ:

• ਲੇਆਉਟ ਨੂੰ ਡਿਜ਼ਾਇਨ ਕਰੋ (ਪੇਪਰ ਤੇ ਜਾਂ ਗ੍ਰਾਫਿਕਸ ਟੂਲ ਜਾਂ ਮੇਰੇ ਸਿਰ ਵਿੱਚ)
• ਪਤਾ ਕਰੋ ਕਿ ਪੰਨਿਆਂ ਦੇ ਡਿਵੀਜ਼ਨਾਂ ਕਿੱਥੇ ਹੋਣੇ ਹਨ.
• ਵੱਖਰੇ ਕੰਟੇਨਰਾਂ ਦੀਆਂ ਚੌੜਾਈ ਅਤੇ ਉਨ੍ਹਾਂ ਦੇ ਅੰਦਰਲੇ ਤੱਤਾਂ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰੋ.
• ਸਭ ਕੁਝ ਫਲੋਟ ਕਰੋ ਇੱਥੋਂ ਤੱਕ ਕਿ ਬਾਹਰਲੇ ਕੰਟੇਨਰ ਦੇ ਤੱਤ ਵੀ ਖੱਬੇ ਪਾਸੇ ਰੱਖੇ ਗਏ ਹਨ ਤਾਂ ਜੋ ਮੈਨੂੰ ਪਤਾ ਲੱਗ ਸਕੇ ਕਿ ਇਹ ਬ੍ਰਾਉਜ਼ਰ ਵਿਊ ਪੋਰਟ ਦੇ ਸਬੰਧ ਵਿਚ ਕਿੱਥੇ ਹੋਵੇਗਾ.

ਜਿੰਨਾ ਚਿਰ ਤੁਸੀਂ ਆਪਣੇ ਲੇਆਉਟ ਭਾਗਾਂ ਦੀ ਚੌੜਾਈ (ਪ੍ਰਤੀਸ਼ਤ ਵਧੀਆ ਹੁੰਦੇ ਹੋ) ਜਾਣਦੇ ਹੋ, ਤੁਸੀਂ ਉਨ੍ਹਾਂ ਨੂੰ ਰੱਖਣ ਲਈ ਫਲੋਟ ਦੀ ਜਾਇਦਾਦ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ ਜਿੱਥੇ ਉਹ ਸਫ਼ੇ ਤੇ ਹਨ. ਅਤੇ ਵਧੀਆ ਗੱਲ ਇਹ ਹੈ, ਤੁਹਾਨੂੰ ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ ਜਾਂ ਫਾਇਰਫਾਕਸ ਲਈ ਡੱਬਾ ਮਾੱਡਲ ਨਾਲੋਂ ਵੱਖਰੇ ਹੋਣ ਦੀ ਚਿੰਤਾ ਨਹੀਂ ਹੈ.