చిత్రాలను పక్కపక్కకు సరికూర్చుకోవాలి ఎలా?

ఎలా CSS ఉపయోగించి చిత్రాలను పక్కపక్కకు సరికూర్చుకోండి.

如何并排放置图像

第一步 - 添加 HTML：

<div class="row">
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

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

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

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

/* మూడు ఫ్లోటింగ్ కంటైనర్లు (నాలుగు ఫ్లోటింగ్ కంటైనర్లు ఉపయోగించడం 25%, రెండు ఫ్లోటింగ్ కంటైనర్లు ఉపయోగించడం 50%, ఇలా చేయండి) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* చిత్రాల కంటైనర్ తర్వాత ఫ్లోటింగ్ ని శుభ్రం చేయడం */
.row::after {
  content: "";
  clear: both;
  display: table;
}

మీరే ప్రయోగించండి

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

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

.row {
  display: flex;
}
.column {
  flex: 33.33%;
  padding: 5px;
}

మీరే ప్రయోగించండి

మీరు గమనించండి:ఫ్లెక్స్బాక్స్ ఇంటర్నెట్ ఎక్స్ప్లోరర్ 10 మరియు అంతకు ముంది సంస్కరణలను పరిగణనలోకి తీసుకోడం లేదు. మూడు కలమ్లను సృష్టించడానికి ఫ్లోట్ లేదా ఫ్లెక్స్ ఉపయోగించాలి అని మీరు నిర్ణయించవచ్చు. కానీ, మీరు IE10 మరియు తక్కువ సంస్కరణలను మద్దతు చేయాలి అయితే, మీరు ఫ్లోట్ ఉపయోగించాలి.

అడ్వైజరీ:ఫ్లెక్స్బాక్స్ లేఆఉట్ మాడ్యూల్ గురించి మరింత సమాచారం తెలుసుకోవడానికి మా పదార్థాన్ని చదవండి మీరు వినియోగించవచ్చు CSS ఫ్లెక్స్బాక్స్ పాఠ్యం。

రెస్పాంసివ్ అవకాశం జోడించండి

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

ఈ ఉదాహరణలో చిత్రాలను 500px లేదా తక్కువ వెడల్పు వద్ద నిలువుగా స్టాక్ చేయబడుతుంది:

రెస్పాంసివ్ ప్రత్యామ్నాయ ఉదాహరణ

/* రెస్పాంసివ్ లేఆఉట్ - మూడు కలమ్లను సమూహంగా ఉంచడానికి మరియు పారాలుగా ఉంచకూడదు */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

మీరే ప్రయోగించండి

మీడియా క్వరీ గురించి మరింత సమాచారం తెలుసుకోవడానికి మా పదార్థాన్ని చదవండి మీరు వినియోగించవచ్చు CSS మీడియా క్వరీ పాఠ్యం。

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

పాఠ్యం:CSS 图像

పాఠ్యం:CSS ఫ్లోటింగ్

పాఠ్యం:CSS 图片库