ఎలా సృష్టించాలి: రెండు నిలువులు సజ్జెక్షన్

రెండు నిలువులు సజ్జెక్షన్ సృష్టించడం ఎలా?

మొదటి చర్య - హెచ్ఎంఎల్ జోడించండి:

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

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

ఈ ఉదాహరణలో, మేము రెండు సమాంతరం నిలువులు సృష్టించాము:సమాంతరంనిలువులు:

ఫ్లోటింగ్ ఉదాహరణ

.column {
  float: left;
  వెడల్పు: 50%;
}
/* నిలువుల తర్వాత ఫ్లోటింగ్ ని శుభ్రం చేయండి */
.row:after {
  content: "";
  display: table;
  clear: both;
}

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

ప్రతిస్పందకమైన ఫ్లెక్స్ సజ్జెక్షన్ - క్రమంగా ఇంటర్నెట్ ఎక్స్ప్లోరర్ 10 మరియు అంతకన్నా పాత సంస్కరణలను మద్దతు చేయదు.

ఫ్లెక్స్ ఉదాహరణ

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

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

మీరు ఫ్లోటింగ్ లేదా ఫ్లెక్స్ను ఉపయోగించవచ్చు కానీ, మీరు IE10 మరియు తక్కువ సంస్కరణలను మద్దతు చేయాలి అయితే, ఫ్లోటింగ్ ఉపయోగించాలి.

సలహా:Flexible Box Layout Module గురించి మరింత సమాచారం తెలుసుకోవడానికి, మా పదకోశాన్ని చదవండి: CSS ఫ్లెక్స్బాక్స్ శిక్షణాలు。

ఈ ఉదాహరణలో, మేము రెండు వెడల్పులు కలిగిన నిలువులు సృష్టించాము:

ఉదాహరణ

.column {
  float: left;
}
.left {
  వెడల్పు: 25%;
}
.right {
  వెడల్పు: 75%;
}

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

ఈ ఉదాహరణలో, మేము ఒక సృష్టించాము:ప్రతిస్పందకమైనదిరెండు నిలువులు సజ్జెక్షన్:

ఉదాహరణ

/* ప్రతిస్పందకమైన సజ్జెక్షన్ - ప్రదర్శన వెడల్పు కన్నా తక్కువగా ఉన్నప్పుడు, రెండు నిలువులు అనుగుణంగా పెట్టబడతాయి, కాదు సమాంతరంగా */
@media screen and (max-width: 600px) {
  .column {
    వెడల్పు: 100%;
  }
}

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

సంబంధిత పేజీలు

శిక్షణాలు:CSS 网站布局

శిక్షణాలు:CSS ప్రతిస్పందకమైన వెబ్ డిజైన్