ਕਈ ਸਾਲਾਂ ਤੋਂ, CSS ਫਲੋਟੇਸ਼ਨ ਇੱਕ ਵੈਬਸਾਈਟ ਲੇਆਉਟ ਬਣਾਉਣ ਲਈ ਇੱਕ ਠੋਸ, ਪਰ ਲੋੜੀਂਦੀ ਕੰਪੋਨੈਂਟ ਹੈ. ਜੇ ਤੁਹਾਡੇ ਡਿਜ਼ਾਈਨ ਨੂੰ ਬਹੁ ਕਾਲਮ ਲਈ ਕਿਹਾ ਜਾਂਦਾ ਹੈ, ਤੁਸੀਂ ਫਲੋਟਾਂ ਵਿੱਚ ਜਾਂਦੇ ਹੋ ਇਸ ਵਿਧੀ ਨਾਲ ਸਮੱਸਿਆ ਇਹ ਹੈ ਕਿ, ਸ਼ਾਨਦਾਰ ਚਤੁਰਾਈ ਹੋਣ ਦੇ ਬਾਵਜੂਦ ਵੈੱਬ ਡਿਜ਼ਾਇਨਰ / ਡਿਵੈਲਪਰਾਂ ਨੇ ਗੁੰਝਲਦਾਰ ਸਾਈਟ ਲੇਆਉਟ ਬਣਾਉਣ ਵਿੱਚ ਦਿਖਾਇਆ ਹੈ, CSS ਫਲੋਟ ਅਸਲ ਵਿੱਚ ਇਸ ਤਰ੍ਹਾਂ ਨਹੀਂ ਵਰਤੇ ਗਏ ਸਨ.
ਜਦੋਂ ਫਲੋਟਾਂ ਅਤੇ CSS ਪੋਜਿੰਗਿੰਗ ਨੂੰ ਆਉਣ ਵਾਲੇ ਕਈ ਸਾਲਾਂ ਲਈ ਵੈਬ ਡਿਜ਼ਾਈਨ ਵਿਚ ਜਗ੍ਹਾ ਹੋਣ ਦਾ ਨਿਸ਼ਚਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ CSS ਗ੍ਰੇਡ ਅਤੇ ਫਲੇਕਸਬੌਕਸ ਸਮੇਤ ਨਵੀਂ ਲੇਆਉਟ ਤਕਨੀਕਜ਼ ਹੁਣ ਵੈਬ ਡਿਜ਼ਾਈਨਰਾਂ ਨੂੰ ਆਪਣੇ ਸਾਈਟ ਲੇਆਉਟ ਬਣਾਉਣ ਦੇ ਨਵੇਂ ਤਰੀਕੇ ਪ੍ਰਦਾਨ ਕਰ ਰਹੀਆਂ ਹਨ. ਇਕ ਹੋਰ ਨਵੀਂ ਲੇਆਉਟ ਤਕਨੀਕ ਜੋ ਕਿ ਬਹੁਤ ਸਾਰੀਆਂ ਸੰਭਾਵਨਾਵਾਂ ਦਿਖਾਉਂਦੀ ਹੈ CSS ਬਹੁਤ ਸਾਰੇ ਕਾਲਮ
CSS ਕਾਲਮ ਕੁਝ ਸਾਲਾਂ ਲਈ ਆਲੇ-ਦੁਆਲੇ ਹੋ ਗਏ ਹਨ, ਪਰ ਪੁਰਾਣੇ ਬ੍ਰਾਉਜ਼ਰ (ਆਮ ਤੌਰ 'ਤੇ ਇੰਟਰਨੈਟ ਐਕਸਪਲੋਰਰ ਦੇ ਪੁਰਾਣੇ ਵਰਜਨ) ਵਿੱਚ ਸਮਰਥਨ ਦੀ ਘਾਟ ਨੇ ਆਪਣੇ ਉਤਪਾਦਨ ਦੇ ਕੰਮ ਵਿੱਚ ਇਹਨਾਂ ਸਟਾਈਲ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਬਹੁਤ ਸਾਰੇ ਵੈਬ ਪੇਸ਼ਾਵਰਾਂ ਨੂੰ ਰੱਖਿਆ ਹੈ.
IE ਦੇ ਉਹਨਾਂ ਪੁਰਾਣੇ ਵਰਜ਼ਨਾਂ ਦੇ ਸਮਰਥਨ ਦੇ ਅਖੀਰ ਦੇ ਨਾਲ, ਕੁਝ ਵੈਬ ਡਿਜ਼ਾਇਨਰ ਹੁਣ ਨਵੇਂ CSS ਲੇਆਉਟ ਵਿਕਲਪਾਂ, CSS ਕਾਲਮ ਵਿੱਚ ਸ਼ਾਮਲ ਹਨ, ਅਤੇ ਇਹ ਪਤਾ ਲਗਾਉਂਦੇ ਹਨ ਕਿ ਉਹਨਾਂ ਦੇ ਫਲੋਟਾਂ ਨਾਲ ਉਹਨਾਂ ਦੇ ਮੁਕਾਬਲੇ ਇਹਨਾਂ ਨਵੇਂ ਤਰੀਕਿਆਂ ਨਾਲ ਉਹਨਾਂ ਦਾ ਇੰਨਾ ਜ਼ਿਆਦਾ ਕੰਟਰੋਲ ਹੈ.
CSS ਕਾਲਮ ਦੀ ਬੁਨਿਆਦ
ਜਿਵੇਂ ਕਿ ਇਸ ਦਾ ਨਾਮ ਸੁਝਾਅ ਦਿੰਦਾ ਹੈ, CSS ਬਹੁ-ਕਾਲਮ (ਜਿਸ ਨੂੰ ਕਿ CSS3 ਮਲਟੀ-ਲੇਆਉਟ ਲੇਆਊਟ ਵੀ ਕਿਹਾ ਜਾਂਦਾ ਹੈ) ਤੁਹਾਨੂੰ ਕਾਲਮ ਦੀ ਇੱਕ ਸੈੱਟ ਕੀਤੀ ਗਿਣਤੀ ਵਿੱਚ ਸਮੱਗਰੀ ਨੂੰ ਵੰਡਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ. ਸਭ ਤੋਂ ਵੱਧ ਬੁਨਿਆਦੀ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਿਹੜੀਆਂ ਤੁਸੀਂ ਵਰਤ ਸਕੋਗੇ:
- ਕਾਲਮ-ਗਿਣਤੀ
- ਕਾਲਮ-ਪਾੜਾ
ਕਾਲਮ-ਗਿਣਤੀ ਲਈ, ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਕਾਲਮ ਦੀ ਗਿਣਤੀ ਦੱਸੋ. ਕਾਲਮ ਦੂਹਰਾ ਉਨ੍ਹਾਂ ਕਾਲਮਾਂ ਦੇ ਵਿਚਕਾਰ ਗੱਟਰ ਜਾਂ ਸਪੇਸ ਹੋਵੇਗਾ. ਬਰਾਊਜ਼ਰ ਇਹਨਾਂ ਮੁੱਲਾਂ ਨੂੰ ਲੈ ਲਵੇਗਾ ਅਤੇ ਸਮੱਗਰੀ ਨੂੰ ਇਕੋ ਜਿਹੇ ਕਾਲਮਾਂ ਦੀ ਗਿਣਤੀ ਵਿੱਚ ਵੰਡ ਦੇਵੇਗੀ.
CSS ਦੇ ਇੱਕ ਸਧਾਰਨ ਕਾਲਮ ਦੀ ਆਮ ਉਦਾਹਰਨ ਵਿੱਚ ਪਾਠ ਸਮੱਗਰੀ ਦੇ ਇੱਕ ਬਲਾਕ ਨੂੰ ਕਈ ਕਾਲਮ ਵਿੱਚ ਵੰਡਣਾ, ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਇੱਕ ਅਖ਼ਬਾਰ ਲੇਖ ਵਿੱਚ ਦੇਖੋਗੇ. ਕਹੋ ਕਿ ਤੁਹਾਡੇ ਕੋਲ ਹੇਠਾਂ ਦਿੱਤੇ HTML ਮਾਰਕਅਪ ਹਨ (ਨੋਟ ਕਰੋ ਕਿ ਉਦਾਹਰਨ ਦੇ ਉਦੇਸ਼ਾਂ ਲਈ, ਮੈਂ ਸਿਰਫ਼ ਇੱਕ ਪੈਰਾ ਦੀ ਸ਼ੁਰੂਆਤ ਪਾ ਰਿਹਾ ਹਾਂ, ਜਦੋਂ ਕਿ ਅਭਿਆਸ ਵਿੱਚ ਇਸ ਮਾਰਕੱਪ ਵਿੱਚ ਸਮਗਰੀ ਦੇ ਕਈ ਪੈਰਿਆਂ ਦੀ ਸੰਭਾਵਨਾ ਹੋਵੇਗੀ):
ਤੁਹਾਡੇ ਲੇਖ ਦਾ ਸਿਰਲੇਖ
ਇੱਥੇ ਪਾਠ ਦੇ ਬਹੁਤ ਸਾਰੇ ਪੈਰਿਆਂ ਦੀ ਕਲਪਨਾ ਕਰੋ ...
ਜੇ ਤੁਸੀਂ ਫਿਰ ਇਹਨਾਂ CSS ਸਟਾਈਲ ਲਿਖੀਆਂ:
.content {-moz-column-count: 3; -webkit-column-count: 3; ਕਾਲਮ-ਗਿਣਤੀ: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; ਕਾਲਮ-ਪਾੜਾ: 30px; }ਇਹ CSS ਨਿਯਮ "ਸਮਗਰੀ" ਡਿਵੀਜ਼ਨ ਨੂੰ ਉਨ੍ਹਾਂ ਦੇ ਵਿਚਕਾਰ 30 ਪਿਕਸਲ ਦੇ ਅੰਤਰ ਨਾਲ 3 ਬਰਾਬਰ ਕਾਲਮ ਵਿੱਚ ਵੰਡਦਾ ਹੈ. ਜੇ ਤੁਸੀਂ 3 ਦੇ ਬਜਾਏ ਦੋ ਕਾਲਮ ਚਾਹੀਦੇ ਹੋ, ਤਾਂ ਤੁਸੀ ਉਸ ਵੈਲਯੂ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ ਅਤੇ ਬਰਾਊਜ਼ਰ ਉਨ੍ਹਾਂ ਕਾਲਮਾਂ ਦੀਆਂ ਨਵੀਆਂ ਚੌੜਾਈ ਦੀ ਗਣਨਾ ਕਰੇਗਾ ਜੋ ਸਮਾਨ ਰੂਪ ਵਿੱਚ ਸਮਾਨ ਵੰਡਦਾ ਹੈ. ਧਿਆਨ ਦਿਓ ਕਿ ਅਸੀਂ ਪਹਿਲਾਂ ਵਿਕਰੇਤਾ-ਪ੍ਰੀਫਾਇਕਡ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਉਸ ਤੋਂ ਬਾਅਦ ਗੈਰ-ਪ੍ਰੀਫਿਕਸ ਘੋਸ਼ਣਾਵਾਂ.
ਜਿਵੇਂ ਕਿ ਇਹ ਬਹੁਤ ਸੌਖਾ ਹੈ, ਇਸ ਤਰੀਕੇ ਨਾਲ ਇਸਦਾ ਉਪਯੋਗ ਵੈਬਸਾਈਟ ਵਰਤੋਂ ਲਈ ਸੰਵੇਦਨਸ਼ੀਲ ਹੈ. ਜੀ ਹਾਂ, ਤੁਸੀਂ ਸਮੱਗਰੀ ਦੇ ਸਮੂਹ ਨੂੰ ਬਹੁ ਕਾਲਮ ਵਿਚ ਵੰਡ ਸਕਦੇ ਹੋ, ਪਰ ਇਹ ਵੈਬ ਲਈ ਵਧੀਆ ਪੜ੍ਹਨ ਦਾ ਤਜਰਬਾ ਨਹੀਂ ਹੋ ਸਕਦਾ, ਖਾਸ ਕਰਕੇ ਜੇ ਇਹਨਾਂ ਕਾਲਮਾਂ ਦੀ ਉਚਾਈ ਸਕ੍ਰੀਨ ਦੇ "ਗੁੱਲ" ਤੋਂ ਥੱਲੇ ਆਉਂਦੀ ਹੈ.
ਪਾਠਕ ਨੂੰ ਫਿਰ ਪੂਰੀ ਸਮੱਗਰੀ ਨੂੰ ਪੜ੍ਹਨ ਲਈ ਕ੍ਰਮ ਉੱਤੇ ਅਤੇ ਹੇਠਾਂ ਕਰਨਾ ਹੋਵੇਗਾ ਫਿਰ ਵੀ, CSS ਕਾਲਮ ਦਾ ਪ੍ਰਿੰਸੀਪਲ ਅਸਾਨ ਹੁੰਦਾ ਹੈ ਜਿਵੇਂ ਤੁਸੀਂ ਇੱਥੇ ਵੇਖਦੇ ਹੋ, ਅਤੇ ਇਸ ਨੂੰ ਕੁਝ ਪੈਰਿਆਂ ਦੀ ਸਮਗਰੀ ਨੂੰ ਵੰਡਣ ਤੋਂ ਇਲਾਵਾ ਹੋਰ ਬਹੁਤ ਕੁਝ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ - ਇਹ ਅਸਲ ਵਿੱਚ ਲੇਆਉਟ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ.
CSS ਕਾਲਮ ਦੇ ਨਾਲ ਲੇਆਉਟ
ਕਹੋ ਕਿ ਤੁਹਾਡੇ ਕੋਲ ਇਕ ਸਮਗਰੀ ਖੇਤਰ ਦੇ ਨਾਲ ਇੱਕ ਵੈਬਪੇਜ ਹੈ ਜਿਸਦੇ ਕੋਲ ਸਮੱਗਰੀ ਦੇ 3 ਕਾਲਮ ਹਨ. ਇਹ ਇੱਕ ਬਹੁਤ ਹੀ ਖਾਸ ਵੈਬਸਾਈਟ ਲੇਆਉਟ ਹੈ, ਅਤੇ ਉਹ 3 ਕਾਲਮ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ, ਤੁਸੀਂ ਆਮ ਤੌਰ ਤੇ ਉਨ੍ਹਾਂ ਡਿਵੀਜ਼ਨਾਂ ਨੂੰ ਫਲੋਟ ਬਣਾਉਂਦੇ ਹੋ ਜਿਹੜੇ. ਬਹੁਤ ਸਾਰੇ ਕਾਲਮ ਨਾਲ, ਇਹ ਬਹੁਤ ਸੌਖਾ ਹੈ.
ਇੱਥੇ ਕੁਝ ਨਮੂਨਾ HTML ਹੈ:
ਤਾਜ਼ਾ ਖ਼ਬਰਾਂ
ਸਮੱਗਰੀ ਇੱਥੇ ਆਵੇਗੀ ...
ਸਾਡੇ ਬਲਾਗ
ਸਮੱਗਰੀ ਇੱਥੇ ਆਵੇਗੀ ...
ਆਉਣ ਵਾਲੇ ਸਮਾਗਮ
ਸਮੱਗਰੀ ਇੱਥੇ ਆਵੇਗੀ ...
ਇਹਨਾਂ ਬਹੁ ਕਾਲਮ ਨੂੰ ਬਣਾਉਣ ਲਈ CSS ਜੋ ਤੁਸੀਂ ਪਹਿਲਾਂ ਦੇਖਿਆ ਹੈ ਉਸ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ:
.content {-moz-column-count: 3; -webkit-column-count: 3; ਕਾਲਮ-ਗਿਣਤੀ: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; ਕਾਲਮ-ਪਾੜਾ: 30px; }ਹੁਣ, ਇੱਥੇ ਚੁਣੌਤੀ ਇਹ ਹੈ ਕਿ, ਕਿਉਂਕਿ ਬਰਾਊਜ਼ਰ ਇਸ ਸਮਾਨ ਨੂੰ ਬਰਾਬਰ ਰੂਪ ਵਿੱਚ ਵੰਡਣਾ ਚਾਹੁੰਦਾ ਹੈ, ਇਸ ਲਈ ਜੇ ਇਹਨਾਂ ਡਿਵੀਜ਼ਨਾਂ ਦੀ ਸਮਗਰੀ ਦੀ ਲੰਬਾਈ ਵੱਖਰੀ ਹੈ, ਤਾਂ ਉਹ ਬਰਾਊਜ਼ਰ ਅਸਲ ਵਿੱਚ ਇੱਕ ਵਿਅਕਤੀਗਤ ਡਿਵੀਜ਼ਨ ਦੀ ਸਮਗਰੀ ਨੂੰ ਵੰਡ ਦੇਵੇਗਾ, ਇਸਦੇ ਸ਼ੁਰੂ ਵਿੱਚ ਇੱਕ ਕਾਲਮ ਵਿੱਚ ਅਤੇ ਫਿਰ ਇੱਕ ਹੋਰ ਵਿੱਚ ਜਾਰੀ (ਤੁਸੀਂ ਇਸ ਨੂੰ ਇੱਕ ਪ੍ਰਯੋਗ ਚਲਾਉਣ ਲਈ ਅਤੇ ਹਰੇਕ ਡਿਵੀਜ਼ਨ ਦੇ ਅੰਦਰ ਵੱਖਰੇ ਵੱਖਰੀ ਸਮੱਗਰੀ ਜੋੜਨ ਲਈ ਇਸ ਕੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵੇਖ ਸਕਦੇ ਹੋ)!
ਇਹ ਉਹ ਨਹੀਂ ਹੈ ਜੋ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਇਹ ਹਰ ਇਕ ਵੰਡ ਇਕ ਵੱਖਰੀ ਕਾਲਮ ਬਣਾਵੇ, ਅਤੇ ਭਾਵੇਂ ਕੋਈ ਵੀ ਵਿਅਕਤੀਗਤ ਵੰਡ ਦੀ ਸਮੱਗਰੀ ਕਿੰਨੀ ਛੋਟੀ ਹੋਵੇ ਜਾਂ ਛੋਟੀ ਹੋਵੇ, ਤੁਸੀਂ ਕਦੇ ਵੀ ਇਸ ਨੂੰ ਵੰਡਣਾ ਨਹੀਂ ਚਾਹੋਗੇ. ਤੁਸੀਂ ਇਸ ਨੂੰ CSS ਦੀ ਇਕ ਵਾਧੂ ਲਾਈਨ ਨੂੰ ਜੋੜ ਕੇ ਇਸਨੂੰ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹੋ:
.content div {display: inline-block; }ਇਹ "ਸਮੱਗਰੀ" ਦੇ ਅੰਦਰਲੇ ਭਾਗਾਂ ਨੂੰ ਬਰਕਰਾਰ ਰਹਿਣ ਲਈ ਮਜਬੂਰ ਕਰੇਗਾ ਭਾਵੇਂ ਕਿ ਬਰਾਊਜ਼ਰ ਇਸ ਨੂੰ ਬਹੁ ਕਾਲਮ ਵਿੱਚ ਵੰਡਦਾ ਹੈ. ਇਸ ਤੋਂ ਵੀ ਵਧੀਆ, ਕਿਉਂਕਿ ਅਸੀਂ ਇੱਥੇ ਇੱਕ ਨਿਸ਼ਚਿਤ ਚੌੜਾਈ ਨਹੀਂ ਦਿੱਤੀ ਸੀ, ਇਹ ਕਾਲਮ ਆਟੋਮੈਟਿਕ ਹੀ ਬ੍ਰਾਉਜ਼ਰ ਦੇ ਆਕਾਰ ਦੇ ਰੂਪ ਵਿੱਚ ਆਕਾਰ ਦੇ ਰੂਪ ਵਿੱਚ ਆਕਾਰ ਦੇਵੇਗੀ, ਉਹਨਾਂ ਨੂੰ ਜਵਾਬਦੇਹ ਵੈਬਸਾਈਟਾਂ ਲਈ ਇੱਕ ਆਦਰਸ਼ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ. ਉਸ ਥਾਂ ਵਿੱਚ "ਇਨਲਾਈਨ-ਬਲਾਕ" ਸ਼ੈਲੀ ਨਾਲ, ਤੁਹਾਡੇ 3 ਭਾਗਾਂ ਵਿੱਚ ਹਰ ਇੱਕ ਸਮਗਰੀ ਦਾ ਇੱਕ ਵੱਖਰਾ ਕਾਲਮ ਹੋਵੇਗਾ.
ਕਾਲਮ-ਚੌੜਾਈ ਦੀ ਵਰਤੋਂ
"ਕਾਲਮ-ਗਿਣਤੀ" ਤੋਂ ਇਲਾਵਾ ਇਕ ਹੋਰ ਜਾਇਦਾਦ ਹੈ ਜੋ ਤੁਸੀਂ ਵਰਤ ਸਕਦੇ ਹੋ, ਅਤੇ ਤੁਹਾਡੇ ਲੇਆਊਟ ਲੋੜਾਂ ਦੇ ਆਧਾਰ ਤੇ, ਇਹ ਅਸਲ ਵਿੱਚ ਤੁਹਾਡੀ ਸਾਈਟ ਲਈ ਵਧੀਆ ਚੋਣ ਹੋ ਸਕਦੀ ਹੈ. ਇਹ "ਕਾਲਮ-ਚੌੜਾਈ" ਹੈ ਪਹਿਲਾਂ ਵਾਂਗ ਦਿਖਾਇਆ ਗਿਆ ਉਹੀ ਐਚਟੀਐਮਐਲ ਮਾਰਕਅੱਪ ਦੀ ਵਰਤੋਂ ਨਾਲ, ਅਸੀਂ ਇਸ ਦੀ ਬਜਾਏ ਆਪਣੇ CSS ਨਾਲ ਕਰ ਸਕਦੇ ਹਾਂ:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; ਕਾਲਮ-ਚੌੜਾਈ: 500 ਪੈਕਸ; -moz-column-gap: 30px; -webkit-column-gap: 30px; ਕਾਲਮ-ਪਾੜਾ: 30px; } .content div {display: inline-block; }ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ ਇਹ ਹੈ ਕਿ ਬਰਾਉਜ਼ਰ ਇਸ "ਕਾਲਮ-ਚੌੜਾਈ" ਨੂੰ ਉਸ ਕਾਲਮ ਦੇ ਵੱਧ ਤੋਂ ਵੱਧ ਮੁੱਲ ਦੇ ਤੌਰ ਤੇ ਵਰਤਦਾ ਹੈ. ਇਸ ਲਈ ਜੇਕਰ ਬਰਾਊਜ਼ਰ ਵਿੰਡੋ 500 ਪਿਕਸਲ ਤੋਂ ਚੌੜੀ ਹੋਵੇ ਤਾਂ ਇਹ 3 ਡਿਵੀਜ਼ਨਾਂ ਇੱਕ ਕਾਲਮ ਵਿਚ, ਇਕ ਦੂਜੇ ਦੇ ਸਿਖਰ ਤੇ ਹੋਣਗੀਆਂ. ਮੋਬਾਈਲ / ਛੋਟੇ ਸਕ੍ਰੀਨ ਲੇਆਉਟ ਲਈ ਇਹ ਇੱਕ ਆਮ ਖਾਕਾ ਹੈ.
ਜਿਵੇਂ ਕਿ ਬਰਾਊਜ਼ਰ ਦੀ ਚੌੜਾਈ ਨਿਸ਼ਚਿਤ ਕਾਲਮ ਦੇ ਅੰਤਰਾਲ ਦੇ ਨਾਲ 2 ਕਾਲਮਾਂ ਨੂੰ ਫਿੱਟ ਕਰਨ ਲਈ ਕਾਫ਼ੀ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ, ਬਰਾਊਜ਼ਰ ਆਪਣੇ ਆਪ ਹੀ ਇੱਕ ਕਾਲਮ ਖਾਕੇ ਤੋਂ ਦੋ ਕਾਲਮ ਤੱਕ ਜਾਏਗਾ. ਸਕਰੀਨ ਦੀ ਚੌੜਾਈ ਵਧਾਉਂਦੇ ਰਹੋ ਅਤੇ ਆਖ਼ਰਕਾਰ, ਤੁਹਾਨੂੰ 3 ਕਾਲਮ ਡਿਜ਼ਾਈਨ ਮਿਲੇਗਾ, ਜਿਸ ਵਿਚ ਸਾਡੇ 3 ਡਿਵੀਜ਼ਨਾਂ, ਆਪਣੇ ਆਪਣੇ ਕਾਲਮ ਵਿਚ ਪ੍ਰਦਰਸ਼ਿਤ ਹੋਣਗੇ. ਦੁਬਾਰਾ ਫਿਰ, ਇਹ ਕੁਝ ਜਵਾਬਦੇਹ, ਬਹੁ-ਯੰਤਰ ਦੇ ਅਨੁਕੂਲ ਲੇਟਵਾਂ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਦਾ ਵਧੀਆ ਤਰੀਕਾ ਹੈ, ਅਤੇ ਤੁਹਾਨੂੰ ਲੇਆਉਟ ਸਟਾਇਲ ਬਦਲਣ ਲਈ ਮੀਡੀਆ ਸਵਾਲਾਂ ਦੀ ਵੀ ਲੋੜ ਨਹੀਂ ਹੈ!
ਹੋਰ ਕਾਲਮ ਵਿਸ਼ੇਸ਼ਤਾ
ਇੱਥੇ ਕਵਰ ਕੀਤੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਤੋਂ ਇਲਾਵਾ, "ਕਾਲਮ-ਨਿਯਮ" ਲਈ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹਨ, ਜਿਸ ਵਿਚ ਰੰਗ, ਸਟਾਈਲ ਅਤੇ ਚੌੜਾਈ ਦੇ ਮੁੱਲ ਸ਼ਾਮਲ ਹਨ, ਜੋ ਕਿ ਤੁਹਾਡੇ ਕਾਲਮਾਂ ਦੇ ਵਿਚਕਾਰ ਨਿਯਮ ਬਣਾਉਣ ਵਿੱਚ ਸਹਾਇਕ ਹਨ. ਇਹਨਾਂ ਨੂੰ ਬਾਰਡਰ ਦੀ ਬਜਾਏ ਵਰਤਿਆ ਜਾਵੇਗਾ ਜੇਕਰ ਤੁਸੀਂ ਆਪਣੇ ਕਾਲਮ ਨੂੰ ਵੱਖ ਕਰਨ ਲਈ ਕੁਝ ਲਾਈਨਾਂ ਚਾਹੁੰਦੇ ਹੋ.
ਪ੍ਰਯੋਗ ਕਰਨ ਦਾ ਸਮਾਂ
ਵਰਤਮਾਨ ਵਿੱਚ, CSS ਮਲਟੀਪਲ ਕਾਲਮ ਲੇਆਉਟ ਬਹੁਤ ਵਧੀਆ ਢੰਗ ਨਾਲ ਸਹਿਯੋਗੀ ਹੈ. ਪ੍ਰੀਫਿਕਸ ਦੇ ਨਾਲ, 94% ਤੋਂ ਵੱਧ ਵੈਬ ਯੂਜ਼ਰਜ਼ ਇਹਨਾਂ ਸਟਾਈਲ ਨੂੰ ਦੇਖਣ ਦੇ ਯੋਗ ਹੋਣਗੇ, ਅਤੇ ਇਹ ਗੈਰ-ਸਹਿਯੋਗੀ ਸਮੂਹ ਅਸਲ ਵਿੱਚ ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ ਦੇ ਬਹੁਤ ਪੁਰਾਣੇ ਵਰਜਨ ਹੋ ਸਕਦਾ ਹੈ, ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਹੁਣੇ ਵੀ ਸਮਰਥਨ ਨਹੀਂ ਦਿੰਦੇ ਹੋ.
ਇਸ ਪੱਧਰ ਦੇ ਸਮਰਥਨ ਦੇ ਨਾਲ ਹੁਣ ਮੌਜੂਦ ਹੈ, ਇਸ ਲਈ ਕੋਈ ਕਾਰਨ ਨਹੀਂ ਹੈ ਕਿ CSS ਸਟਾੱਮ ਦੇ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰਨਾ ਸ਼ੁਰੂ ਨਾ ਕਰੋ ਅਤੇ ਉਤਪਾਦ ਤਿਆਰ ਕਰਨ ਵਾਲੀਆਂ ਵੈਬਸਾਈਟਾਂ ਵਿੱਚ ਇਨ੍ਹਾਂ ਸਟੈਪ ਦੀਆਂ ਡਿਪਲਾਇਜ਼ ਨਾ ਕਰੋ. ਤੁਸੀਂ ਇਸ ਲੇਖ ਵਿੱਚ ਪੇਸ਼ ਕੀਤੇ ਗਏ HTML ਅਤੇ CSS ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਆਪਣੇ ਪ੍ਰਯੋਗਾਂ ਨੂੰ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਇਹ ਦੇਖਣ ਲਈ ਵੱਖੋ ਵੱਖਰੇ ਮੁੱਲਾਂ ਨਾਲ ਖੇਡ ਸਕਦੇ ਹੋ ਕਿ ਤੁਹਾਡੀ ਸਾਈਟ ਦੀ ਖਾਕਾ ਦੀਆਂ ਜ਼ਰੂਰਤਾਂ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਕੀ ਕੰਮ ਕਰੇਗਾ.