سی ایس ایس لائؤت - فلو مثال

این صفحه مثال‌های معمول فلوئید را ارائه می‌دهد.

گرید / کادرهای هم عرض

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 ویژگی‌ها به ما اجازه می‌دهند تا پادینگ و لبه‌های کل کادر (و ارتفاع) را درkl در نظر بگیریم، تا اطمینان حاصل شود که پادینگ در داخل کادر باقی می‌ماند و نمی‌شکند.

شما می‌توانید در CSS Box Sizing در این فصل، شما می‌توانید اطلاعات بیشتری در مورد ویژگی 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 派上用场的地方 - 因为它可以自动拉伸框使其与最长的框一样长：

ਉਦਾਹਰਣ

ਫਲੈਕਸਬਾਕਸ ਦੀ ਮਦਦ ਨਾਲ ਐਲਾਸਟਿਕ ਬਾਕਸ ਬਣਾਓ:

Box 1 - ਇਹ ਕੁਝ ਟੈਕਸਟ ਹੈ ਤਾਕਿ ਸਮੱਗਰੀ ਵਾਕਾਰੀ ਤਰ੍ਹਾਂ ਹੋਵੇ। ਇਹ ਕੁਝ ਟੈਕਸਟ ਹੈ ਤਾਕਿ ਸਮੱਗਰੀ ਵਾਕਾਰੀ ਤਰ੍ਹਾਂ ਹੋਵੇ। ਇਹ ਕੁਝ ਟੈਕਸਟ ਹੈ ਤਾਕਿ ਸਮੱਗਰੀ ਵਾਕਾਰੀ ਤਰ੍ਹਾਂ ਹੋਵੇ। ਇਹ ਕੁਝ ਟੈਕਸਟ ਹੈ ਤਾਕਿ ਸਮੱਗਰੀ ਵਾਕਾਰੀ ਤਰ੍ਹਾਂ ਹੋਵੇ। ਇਹ ਕੁਝ ਟੈਕਸਟ ਹੈ ਤਾਕਿ ਸਮੱਗਰੀ ਵਾਕਾਰੀ ਤਰ੍ਹਾਂ ਹੋਵੇ।
Box 2 - ਮੇਰੀ ਉਚਾਈ Box 1 ਦੇ ਅਨੁਸਾਰ ਨਿਰਧਾਰਤ ਹੋਵੇਗੀ。

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਫਲੈਕਸਬਾਕਸ ਦੀ ਇੱਕਮਾਤਰ ਸਮੱਸਿਆ ਇਹ ਹੈ ਕਿ ਉਹ Internet Explorer 10 ਜਾਂ ਪੁਰਾਣੇ ਵਰਜਨਾਂ ਵਿੱਚ ਕੰਮ ਨਹੀਂ ਕਰਦਾ। ਤੁਸੀਂ ਸਾਡੇ CSS Flexbox ਫਲੈਕਸਬਾਕਸ ਲੇਆਉਟ ਮੋਡੂਲ ਦੇ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਮੁਕਤਾਰਾ ਲਈ ਚਾਪਣ

ਨੈਵੀਗੇਸ਼ਨ ਮੇਨੂ

ਜੋੜੋ float ਹਵਾਲੇ ਸੂਚੀ ਦੇ ਨਾਲ ਇਸਤੇਮਾਲ ਕਰਕੇ ਪੱਧਰੀ ਨੈਵੀਗੇਸ਼ਨ ਬਣਾਓ:

ਉਦਾਹਰਣ

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

Web ਲੇਆਉਟ ਉਦਾਹਰਣ

ਵਰਤੋਂ float ਵਿਸ਼ੇਸ਼ਤਾ ਸਮੱਪਤ ਹੋਣ ਤੋਂ ਬਾਅਦ ਪੂਰਾ Web ਲੇਆਉਟ ਦੀ ਵਰਤੋਂ ਬਹੁਤ ਮਸ਼ਹੂਰ ਹੈ:

ਉਦਾਹਰਣ

.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 指定当溢出元素的内容区域时，如何处理内容的上/下边缘。