ਕਿਵੇਂ ਬਣਾਓ: ਚਾਰ ਸਤਾਨਾ ਬੈਂਡਵਰਕ

ਚਾਰ ਸਤਾਨਾ ਬੈਂਡਵਰਕ ਕਿਵੇਂ ਬਣਾਓ

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

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

ਦੂਜਾ ਪਗਲਾ - ਸੈਂਕੜੇ ਜੋੜੋ:

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਅਸੀਂ ਚਾਰ ਸਤਾਨਾ ਬੈਂਡਵਰਕ ਬਣਾਵਾਂਗੇ:

ਉਦਾਹਰਣ

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

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

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਅਸੀਂ ਇੱਕਪ੍ਰਤੀਕਿਰਿਆਮੂਲਕਚਾਰ ਸਤਾਨਾ ਬੈਂਡਵਰਕ:

ਉਦਾਹਰਣ

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

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

相关页面

教程：CSS 网站布局

教程：CSS 响应式网页设计