ఎలా రూపొందించాలి: మిశ్రమ నిలువుల సంస్థాపన

మిశ్రమ నిలువుల సంస్థాపనను ఎలా రూపొందించాలి

మొదటి చర్య - HTML జోడించండి:

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

రెండవ చర్య - CSS జోడించండి:

ఈ ఉదాహరణలో, మేము నాలుగు నిలువుల సంస్థాపనను రూపొందిస్తాము. ఇది 900 పిక్సెల్స్ కంటే తక్కువ వెడల్పు స్క్రీన్లో రెండు నిలువులుగా మారుతుంది. కానీ 600 పిక్సెల్స్ కంటే తక్కువ వెడల్పు స్క్రీన్లో, నిలువులు సమాంతరంగా ఉండదు, అది నిలువులుగా ఉంటాయి.

/* నాలుగు సమాన వెడల్పు నిలువులను ఫ్లోట్ చేయండి */
.column {
  float: left;
  width: 25%;
}
/* ప్రవాహం నివారించండి */
.row:after {
  content: "";
  display: table;
   clear: both;
}
/* ప్రతిస్పందక సంస్థాపన - నాలుగు నిలువులను రెండుగా మార్చండి */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}
/* ప్రతిస్పందక సంస్థాపన - రెండు నిలువు గా గాని సమాంతరంగా ఉంచండి */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

స్వయంగా ప్రయత్నించండి

相关页面

教程：CSS 网站布局

教程：CSS 响应式网页设计