如何创建：等高列

CSS తో అదే పరిమాణం కలన్లు సృష్టించడానికి తెలుసుకోండి.

ఎలా అదే పరిమాణం కలన్లు సృష్టించాలి

మీ కలన్లు పరిమితిలో ప్రదర్శించాలి అయితే, మీరు సాధారణంగా వాటిని అదే ప్రామాణంగా కోరవచ్చు (అత్యధిక ప్రామాణంతో పోల్చండి).

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

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

<div class="col-container">
  <div class="col">
    <h2>కలన్ 1</h2>
    <p>హలో వరల్డ్</p>
  </div>
  <div class="col">
    <h2>కలన్ 2</h2>
    <p>హలో వరల్డ్!</p>
    <p>హలో వరల్డ్!</p>
    <p>హలో వరల్డ్!</p>
    <p>హలో వరల్డ్!</p>
  </div>
  <div class="col">
    <h2>కలన్ 3</h2>
    <p>ఇతర పదాలు..</p>
    <p>ఇతర పదాలు..</p>
  </div>
</div>

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

.col-container {
  డిస్ప్లే: టేబుల్; /* కంటైనర్ అంశాలను టేబుల్గా ప్రదర్శించండి */
  వెడల్పు: 100%; /* పూర్తి వెడల్పుగా సెట్ చేయండి మరియు పూర్తి పేజీని విస్తరించండి */
}
.col {
  డిస్ప్లే: టేబుల్‌సెల్; /* కంటైనర్ లోని అంశాలను టేబుల్ సెల్లుగా ప్రదర్శించండి */
}

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

ప్రతిస్పందక అదే పరిమాణం

మేము పూర్వ ఉదాహరణలో సృష్టించిన కలన్లు ప్రతిస్పందకమైనవి (మీరు ప్రయత్నించిన ఉదాహరణలో బ్రౌజర్ విండో వెడల్పును మార్చినట్లయితే, వాటివాటి అవసరమైన వెడల్పు మరియు ప్రామాణం ఆటోమేటిక్‌గా మారుతాయి). కానీ, చిన్న స్క్రీన్లకు (మొబైల్ ఫోన్ వంటివి), వాటిని పరిమితిలో స్టాక్ చేయాలని మీరు కోరవచ్చు కాదు అని కోరవచ్చు కాదు:

ఈ పనిని సాధించడానికి, ఒక మీడియా క్వరీ జోడించండి మరియు ఈ కోడ్ కు బ్రేక్‌పాయింట్ పిక్సెల్ వివరించండి:

ప్రామాణికం

/* బ్రౌజర్ విండో 600పిక్సెల్ కంటే చిన్నది అయితే, కలన్లను స్టాక్ చేయండి */
@మీడియా ఆన్లీ స్క్రీన్ అండ్ (మాక్స్-వెడల్పు: 600పిక్సెల్) {
  .col {
    డిస్ప్లే: బ్లాక్;
    వెడల్పు: 100%;
  }
}

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

ఫ్లెక్స్‌బాక్స్ తో అదే పరిమాణం మరియు అదే వెడల్పు సాధించండి

ఫ్లెక్స్‌బాక్స్ తో అదే పరిమాణం వినియోగించండి:

ప్రామాణికం

.col-container {
  డిస్ప్లే: ఫ్లెక్స్;
  వెడల్పు: 100%;
}
.col {
  ఫ్లెక్స్: 1;
  ప్యాడింగ్: 16పిక్సెల్;
}

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

మీరు నమ్మకం కాని విషయం గురించి ఉంటే శ్రద్ధ వహించండి:ఇంటర్నెట్ ఎక్స్‌లోరర్ 10 మరియు ఆధికారిక వెర్షన్లు ఫ్లెక్స్‌బాక్స్ ను మద్దతు చేయలేదు。

相关页面

教程：CSS Flexbox