ఎలా సృష్టించాలి: నిలువుగా పెట్టిన పట్టిక
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