ਕਿਵੇਂ ਬਣਾਉਣਾ: ਸਮਾਨ ਉਚਾਈ ਵਾਲੇ ਸਤੰਭਾਂ

CSS ਦੀ ਮਦਦ ਨਾਲ ਸਮਾਨ ਉਚਾਈ ਵਾਲੇ ਸਤੰਭਾਂ ਨੂੰ ਕਿਵੇਂ ਬਣਾਉਣਾ ਸਿੱਖੋ。

ਸਮਾਨ ਉਚਾਈ ਵਾਲੇ ਸਤੰਭਾਂ ਨੂੰ ਕਿਵੇਂ ਬਣਾਉਣਾ?

ਜਦੋਂ ਤੁਹਾਡੇ ਸਤੰਭਾਂ ਨੂੰ ਸਾਥੇ ਪਾਰਸਪਰਿਕ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਆਮ ਤੌਰ 'ਤੇ ਇਹਨਾਂ ਨੂੰ ਸਮਾਨ ਉਚਾਈ ਵਾਲੇ ਹੋਣਾ ਚਾਹੁੰਦੇ ਹੋ (ਸਭ ਤੋਂ ਉੱਚੀ ਉਚਾਈ ਨਾਲ ਮੇਲ ਖਾਣਾ ਚਾਹੀਦਾ ਹੈ).

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਪਹਿਲਾ ਕਦਮ - ਐੱਚਟੀਐੱਮਐੱਲ ਜੋੜੋ:

<div class="col-container">
  <div class="col">
    <h2>ਸਤੰਭ 1</h2>
    <p>Hello World</p>
  </div>
  <div class="col">
    <h2>ਸਤੰਭ 2</h2>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
  </div>
  <div class="col">
    <h2>ਸਤੰਭ 3</h2>
    <p>ਕੁਝ ਹੋਰ ਟੈਕਸਟ..</p>
    <p>ਕੁਝ ਹੋਰ ਟੈਕਸਟ..</p>
  </div>
</div>

ਦੂਜਾ ਕਦਮ - ਸਕ੍ਰੀਨ ਸਕ੍ਰਿਪਟ ਜੋੜੋ:

.col-container {
  display: table; /* ਕੰਟੇਨਰ ਐਲੀਮੈਂਟ ਨੂੰ ਟੇਬਲ ਵਜੋਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੋ */
  width: 100%; /* ਪੂਰੀ ਚੌਡਾਈ ਸੈਟ ਕਰੋ ਤਾਂ ਇਹ ਪੂਰੀ ਪੰਨੇ ਵਿੱਚ ਫੈਲ ਜਾਵੇ */
}
.col {
  display: table-cell; /* ਕੰਟੇਨਰ ਅੰਦਰ ਦੇ ਇਲੈਕਟਰਨਾਂ ਨੂੰ ਟੇਬਲ ਸੈੱਲ ਵਜੋਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੋ */
}

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਸਮਾਨ ਉਚਾਈ

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

ਇਸ ਲਈ ਇੱਕ ਮੀਡੀਆ ਕਿਊਰੀ ਜੋੜੋ ਅਤੇ ਇਸ ਲਈ ਇੱਕ ਬੈਕਟਨ ਪਿਕਸਲ ਵੈਲਿਊ ਸੈਟ ਕਰੋ:

ਉਦਾਹਰਣ

/* ਜੇਕਰ ਬਰਾਉਜ਼ਰ ਵਿੰਡੋ 600px ਤੋਂ ਘੱਟ ਹੈ ਤਾਂ ਸਤੰਭਾਂ ਨੂੰ ਸਟੈਕ ਕਰੋ */
@media only screen and (max-width: 600px) {
  .col {
    display: block;
    width: 100%;
  }
}

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

Flexbox ਰਾਹੀਂ ਸਮਾਨ ਉਚਾਈ ਅਤੇ ਚੌਡਾਈ ਪ੍ਰਾਪਤ ਕਰਨਾ

ਤੁਸੀਂ Flexbox ਦੀ ਮਦਦ ਨਾਲ ਸਮਾਨ ਉਚਾਈ ਵਾਲੇ ਬਕਸੇ ਬਣਾ ਸਕਦੇ ਹੋ

ਉਦਾਹਰਣ

.col-container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
  padding: 16px;
}

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਧਿਆਨ:ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 10 ਅਤੇ ਪੁਰਾਣੇ ਸਰੋਤਾਂ ਨੂੰ Flexbox ਸਮਰਥਨ ਨਹੀਂ ਹੈ。

相关页面

教程：CSS Flexbox