ఎలా సృష్టించాలి: నిలువుగా పెట్టిన పట్టిక

CSS ఉపయోగించడం ద్వారా నిలువుగా పెట్టిన పట్టికను సృష్టించడానికి తెలుసుకోండి.

పేరు ప్రథమం పేరు వయస్సు
Jill Smith 50
Eve Jackson 94
John Doe 80
పేరు ప్రథమం పేరు వయస్సు
Jill Smith 50
Eve Jackson 94
John Doe 80

నిలువుగా పెట్టిన పట్టికను ఎలా నిలువుగా పెట్టండి:

మీరు CSS ఉపయోగించడానికి ఎలా తెలుసుకోవచ్చు: float నిలువుగా పెట్టిన పట్టికను సృష్టించడానికి అంతర్భాగం రాబడిన స్థానాన్ని సృష్టించండి:

ఉదాహరణ

* {
  box-sizing: border-box;
}
/* రెండు నిలువుగా పెట్టిన సంస్థాపన సృష్టించడానికి) */
.column {
  float: left;
  width: 50%;
  padding: 5px;
}
/* Clearfix (ఫ్లాట్ కార్యకలాపం) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

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

మీరు CSS ఉపయోగించడానికి ఎలా తెలుసుకోవచ్చు: flex నిలువుగా పెట్టిన పట్టికను సృష్టించడానికి అంతర్భాగం రాబడిన స్థానాన్ని సృష్టించండి:

ఉదాహరణ

* {
  box-sizing: border-box;
}
.row {
  display: flex;
}
.column {
  flex: 50%;
  padding: 5px;
}

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

ముందుకు చూపండి:Flexbox IE10 మరియు అంతకన్నా పాత సంస్థాపనల్లో మద్దతు లేదు. మీరు ఉపయోగించాలి అని నిర్ణయించాలి అని నిర్ణయించండి. float లేదా flex మీ అభిప్రాయం ప్రభావితం చేస్తుంది. కానీ, మీరు IE10 మరియు తక్కువ సంస్థాపనలను మద్దతు చేయాలి అయితే, క్రిందిని ఉపయోగించండి: float.

సూచన:Flexible Box సంస్థాపన మొదటి సూచనలను తెలుసుకోవడానికి, మా క్రింది పఠ్యాన్ని చదవండి: CSS Flexbox శిక్షణాలు.

ప్రతిస్పందకతను జోడించండి

పై ఉదాహరణలో మొబైల్ పరికరాలపై చాలా అందంగా కనిపించదు, ఎందుకంటే రెండు నిలువుగా పెట్టిన స్థానాలు పేజీలో చాలా స్థలాన్ని ఆక్రమిస్తాయి.

ప్రతిస్పందక పట్టికను రూపొందించడానికి, అది రెండు నిలువుగా పెట్టిన సంస్థాపన నుండి మొబైల్ పరికరాలపై పూర్తి వెడల్పు సంస్థాపనకు మారండి కోసం క్రింది మీడియా క్వరీని జోడించండి:

ఉదాహరణ

/* ప్రతిస్పందక సంస్థాపన - కనీసం 600 పిక్సెల్స్ కంటే తక్కువ స్క్రీన్లో, రెండు నిలువుగా పెట్టిన స్థానానికి బదులుగా పెట్టండి */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

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

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

教程:CSS 表格

教程:CSS 浮动

教程:CSS Flexbox