گروه مقاله : CSS
تاريخ انتشار : 1394/02/02 - 16:31
كد :234
برای اینکه بتوانید عناصر را در کنار هم قرار دهید می توانید از خاصیت float استفاده کنید.
برای اینکه بتوانید عناصر را در کنار هم قرار دهید (از نظر افقی نه عمودی) می توانید از خاصیت float استفاده کنید. در این حالت مقادیری که می توانید به این خصوصیت بدهید :
-
Right : برای کنار هم قرار دادن عناصر به ترتیب از سمت راست
-
Left : برای کنار هم قرار دادن عناصر به ترتیب از سمت چپ
از این خاصیت معمولا برای image استفاده می شود، اما ربای طرح بندی و کنار همقرار دادن عناصر هم از آن استفاده می کنند.
زمانی که شما برای یک عنصر float چپ و یا راست در نظر میگیرید، سایر عناصر با توجه به آن قرار می گیرند.
برای درک بهتر به مثال زیر توجه نمایید:
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<p><img src="flower.jpg" width="100" height="140">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
نتیجه به صورت زیر خواهد بود:
اگر به چندین عنصر، بطور مثال به چندین image خاصیت float بدهید، به صورت ردیفی و مرتب در کنار یکدیگر قرار می گیرند (گالری تصاویر).
<!DOCTYPE html>
<html>
<head>
<style>
.thumbnail {
float: left;
width: 110px;
height: 90px;
margin: 5px;
}
</style>
</head>
<body>
<h3>Image Gallery</h3>
<p>Try to resize the browser-window to see what happens when the images do not have enough room.</p>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
</body>
</html>
از بین بردن float با استفاده از clear :
زمانی که برای عناصر خاصیت float در نظر گرفته می شود با توجه به راست یا چپ قرار دادن این خاصیت، سایر عناصر در اطراف آن قرار می گیرند. اما برای جلوگیری از این اتفاق می توانید از clear استفاده نمایید. برای درک بهتر به مثال زیر توجه نمایید.
<!DOCTYPE html>
<html>
<head>
<style>
.thumbnail {
float: left;
width: 110px;
height: 90px;
margin: 5px;
}
.text_line {
clear: both;
margin-bottom: 2px;
}
</style>
</head>
<body>
<h3>Image Gallery</h3>
<p>Try to resize the browser-window to see what happens when the images does not have enough room.</p>
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<h3 class="text_line">Second row</h3>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
</body>
</html>
همه خاصیت های float در css :
|
Property |
Description |
Values |
|
clear |
Specifies which sides of an element where other floating elements are not allowed |
left
right
both
none
inherit |
|
float |
Specifies whether or not a box should float |
left
right
none
inherit |