ਕਿਵੇਂ ਬਣਾਓ: ਦੋ ਸਤੰਭ ਲੇਆਊਟ

ਕਿਵੇਂ ਦੋ ਸਤੰਭ ਲੇਆਊਟ ਬਣਾਓ

ਪਹਿਲਾ ਪੜਾਅ - ਐੱਚਟੀਐੱਮਐੱਲ ਸ਼ਾਮਿਲ ਕਰੋ:

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
</div>

ਦੂਜਾ ਪੜਾਅ - ਐਸੀਐੱਸ ਸ਼ਾਮਿਲ ਕਰੋ:

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਅਸੀਂ ਦੋਸਮਾਨ ਚੌਡਾਈਦੇ ਸਤੰਭ:

ਫਲੌਟਿੰਗ ਉਦਾਹਰਣ

.column {
  float: left;
  width: 50%;
}
/* ਸਤੰਭ ਬਾਅਦ ਫਲੌਟਿੰਗ ਨੂੰ ਸਾਫ ਕਰੋ */
.row:after {
  content: "";
  display: table;
  clear: both;
}

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਦੋ ਸਤੰਭ ਲੇਆਊਟ ਦੇ ਆਧੁਨਿਕ ਤਰੀਕੇ ਵਿੱਚ CSS Flexbox ਦਾ ਉਪਯੋਗ ਕਰਨਾ ਹੈ। ਪਰ ਇਹ Internet Explorer 10 ਜਾਂ ਪੁਰਾਣੇ ਸ਼ਾਮਿਲ ਨਹੀਂ ਹੈ。

Flex ਉਦਾਹਰਣ

.row {
  display: flex;
}
.column {
  flex: 50%;
}

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਤੁਸੀਂ ਫਲੌਟਿੰਗ ਜਾਂ flex ਦਾ ਚੋਣ ਕਰ ਸਕਦੇ ਹੋ ਸਨ ਤਾਂ ਕਿ ਦੋ ਸਤੰਭ ਲੇਆਊਟ ਬਣਾਓ। ਪਰ ਜੇਕਰ ਤੁਸੀਂ IE10 ਜਾਂ ਘੱਟ ਤੋਂ ਸਮਰਥਨ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਫਲੌਟਿੰਗ ਦਾ ਉਪਯੋਗ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ。

ਸੁਝਾਅ:Flexible Box Layout Module ਬਾਰੇ ਜਾਣਕਾਰੀ ਜਾਣਣ ਲਈ ਸਾਡੇ CSS Flexbox ਟੂਰੀਅਲ。

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਅਸੀਂ ਦੋ ਅਸਮਾਨ ਚੌਡਾਈ ਵਾਲੇ ਸਤੰਭ ਬਣਾਵਾਂਗੇ:

ਉਦਾਹਰਣ

.column {
  float: left;
}
.left {
  width: 25%;
}
.right {
  width: 75%;
}

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਅਸੀਂ ਇੱਕਰੈਸਪੋਨਸਿਵਦੋ ਸਤੰਭ ਲੇਆਊਟ:

ਉਦਾਹਰਣ

/* ਰੈਸਪੋਨਸਿਵ ਲੇਆਊਟ - ਜਦੋਂ ਸਕਰੀਨ ਚੌਡਾਈ 600px ਤੋਂ ਘੱਟ ਹੋਵੇ ਤਾਂ ਦੋ ਸਤੰਭ ਮੁਕਤਲਫ਼ ਹੋਣਗੇ, ਨਹੀਂ ਕਿ ਸਾਦੇ ਤੌਰ 'ਤੇ */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਸਬੰਧਤ ਪੰਨੇ

ਟੂਰੀਅਲ:CSS 网站布局

ਟੂਰੀਅਲ:CSS ਰੈਸਪੋਨਸਿਵ ਵੈੱਬਸਾਈਟ ਡਿਜਾਇਨ