CSS 布局 - 浮动实例

ఈ పేజీలో సాధారణ ఫ్లోటింగ్ ఉదాహరణలను అందుబాటులో ఉంది.

గ్రిడ్ / సమాన వెడల్పు బాక్స్

Box 1
Box 2
Box 1
Box 2
Box 3

ద్వారా ఉపయోగించడం ద్వారా float ఈ అంశం ఫ్లోటింగ్ కంటెంట్ బాక్స్లను సులభంగా పరస్పరం ప్రదర్శించడానికి ఉపయోగించవచ్చు:

ఉదాహరణ

* {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%; /* మూడు బాక్స్లు (నాలుగు బాక్స్లుకు 25%, రెండు బాక్స్లుకు 50%, ఇలా కొనసాగుతుంది) */
  padding: 50px; /* చిత్రాల మధ్య అంతరాన్ని పెంచడానికి ఉపయోగించవచ్చు */
}

మీరే ప్రయత్నించండి

box-sizing ఏమిటి?

మీరు సులభంగా మూడు ఫ్లోటింగ్ బాక్స్లను పరస్పరం సృష్టించవచ్చు. కానీ, ప్రతి బాక్స్ని విస్తరించడానికి కొంత పరిణామాలను చేరుస్తే (ఉదాహరణకు, ప్యాడింగ్ లేదా బార్డర్), ఈ బాక్సు చీలుతుంది. box-sizing ఈ అంశం బాక్స్ మొత్తం వెడల్పు (మరియు పొడవు)లో ప్యాడింగ్ మరియు బార్డర్లను చేరుస్తుంది, అలాగే ప్యాడింగ్ బాక్స్లో ఉండి చీలకూడదు.

మా లో మీరు చూడవచ్చు: CSS బాక్స్ సైజింగ్ ఈ చాపలో box-sizing అంశం మరింత తెలుసుకోండి.

చిత్రాలు పరస్పరం

ఈ బాక్స్ గ్రిడ్ (The grid of boxes) చిత్రాలను పరస్పరం ప్రదర్శించడానికి కూడా ఉపయోగించవచ్చు:

ఉదాహరణ

.img-container {
  float: left;
  width: 33.33%; /* మూడు బాక్స్లు (నాలుగు బాక్స్లుకు 25%, రెండు బాక్స్లుకు 50%, ఇలా కొనసాగుతుంది) */
  padding: 5px; /* చిత్రాల మధ్య అంతరాన్ని పెంచడానికి ఉపయోగించవచ్చు */
}

మీరే ప్రయత్నించండి

సమాన వెడల్పు బాక్స్

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

Box 1

Some content, some content, some content

Box 2

Some content, some content, some content

Some content, some content, some content

Some content, some content, some content

ఉదాహరణ

.box {
  height: 500px;
}

మీరే ప్రయత్నించండి

但是，这么做就失去了弹性。如果可以保证框中始终有相同数量的内容，那是可以的。但是很多时候，内容是不一样的。如果您在手机上尝试上例，则会看到第二个框的内容将显示在框的外部。这是 CSS3 Flexbox 派上用场的地方 - 因为它可以自动拉伸框使其与最长的框一样长：

ఉదాహరణ

使用 Flexbox 创建弹性框：

బాక్స్ 1 - ఈ పదాలు వాస్తవానికి అత్యధిక పొడవు ఉన్నట్లు చూపిస్తాయి. ఈ పదాలు వాస్తవానికి అత్యధిక పొడవు ఉన్నట్లు చూపిస్తాయి. ఈ పదాలు వాస్తవానికి అత్యధిక పొడవు ఉన్నట్లు చూపిస్తాయి. ఈ పదాలు వాస్తవానికి అత్యధిక పొడవు ఉన్నట్లు చూపిస్తాయి. ఈ పదాలు వాస్తవానికి అత్యధిక పొడవు ఉన్నట్లు చూపిస్తాయి.
బాక్స్ 2 - నా పొడవు బాక్స్ 1 నిర్వహించబడుతుంది.

మీరే ప్రయత్నించండి

ఫ్లెక్స్‌బాక్స్ యొక్క ఒకే సమస్య అది ఇంటర్నెట్ ఎక్స్‌ప్లోరర్ 10 లేదా అంతకు ముంది వెర్షన్లలో పని చేయదు. మీరు మా లో చూడవచ్చు: CSS ఫ్లెక్స్‌బాక్స్ ఫ్లెక్స్‌బాక్స్ సంరచన మోడ్యూల్ గురించి మరింత తెలుసుకోండి కొన్ని చాప్టర్లు లో నేర్చుకోండి.

నేవిగేషన్ మెనూ

జోడించండి float అనుసంధానాల జాబితాను ఉపయోగించి హోరిజంటల్ మెనూ సృష్టించండి:

ఉదాహరణ

మీరే ప్రయత్నించండి

వెబ్ సైట్ సంరచన ఉదాహరణ

ఉపయోగించండి float అనువర్తనం పూర్తి వెబ్ సైట్ సంరచనను సాధారణంగా ఉపయోగిస్తారు:

ఉదాహరణ

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}
.column {
  float: left;
  padding: 15px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.menu {
  width: 25%;
}
.content {
  width: 75%;
}

మీరే ప్రయత్నించండి

మరిన్ని ఉదాహరణలు

కాంతిరేఖ మరియు మార్జిన్ ఉన్న చిత్రాన్ని ప్రారంభ వచనానికి కుడికి ఫ్లోట్ చేయండి
చిత్రాన్ని ప్రారంభ వచనానికి కుడికి ఫ్లోట్ చేయండి. చిత్రంపై కాంతిరేఖ మరియు మార్జిన్ జోడించండి.
శీర్షికతో ఉన్న చిత్రాన్ని కుడికి ఫ్లోట్ చేయండి
శీర్షికతో ఉన్న చిత్రాన్ని కుడికి ఫ్లోట్ చేయండి.
ప్రారంభ వచనం ఎడమకు ఫ్లోట్ చేయండి
ప్రారంభ వచనం ఎడమకు ఫ్లోట్ చేయండి మరియు దాని శైలిని అమర్చండి.
ఫ్లోటింగ్ ఉపయోగించి ఒక వెబ్ సైట్ సృష్టించండి
ఫ్లోటింగ్ ఉపయోగించి హోమ్ పేజీని సృష్టించండి, దానిలో హెడర్, ఫూటర్, ఎడమ నేవిగేషన్ మరియు ప్రధాన కంటెంట్ ఉంటాయి.

అన్ని CSS ఫ్లోటింగ్ అనువర్తనాలు

అనువర్తనం వివరణ
box-sizing అంశం వెడల్పు మరియు పొడవు గణన పద్ధతిని నిర్వచించండి: వాటిని పెట్టుబడులు మరియు కాంతిరేఖలు చేర్చాలా లేదా లేదు.
clear 指定哪些元素可以在被清除的元素旁边以及在哪一侧浮动。
float 指定元素应如何浮动。
overflow 指定如果内容溢出元素框会发生什么情况。
overflow-x 指定当溢出元素的内容区域时，如何处理内容的左/右边缘。
overflow-y 指定当溢出元素的内容区域时，如何处理内容的上/下边缘。