آموزش float در CSS

آموزش float در CSS

 

تصور کنید مثال زیر را داریم و میخواهیم دوتا div زرد و قرمز کنار یکدیگر قرار بگیرند.

 

<!DOCTYPE html>
<html>
<head>
  <title>lesson</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="lesson.css">
</head>
<body>
  <img src="1.jpg" id="img1">
<div id="main">
  <div id="firstdiv" class="test">
      آموزش رایگان طراحی وبسایت در سایت فرکیان تک
  </div>
  <div id="seconddiv" class="test">
      آموزش رایگان طراحی وبسایت در سایت فرکیان تک
  </div>
</div>
</body>
</html>

 

*{
  margin: 0;
  padding: 0;
}
#img1{
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
}
.test:nth-child(2n){
  background-color: red;
}
.test:nth-child(2n+1){
  background-color: yellow;
}
.test{
  margin: 40px;
  border-radius: 10px;
  padding: 20px;
  width: 200px;
  height: auto;
}

#main{
  background-color: rgba(20,150,60,0.5);
  position: relative;
  height: 800px;
}
آموزش float در css
 

اگر بخواهیم با مدل گفته شده در جزوه های قبل که آموزش position ها بود بنویسیم، یک مشکل برای طراحی سایت ما به وجود می آید.

 

#firstdiv{
  position: absolute;
  left: 20px;
}

#seconddiv{
  position: absolute;
  left: 260px;
}

میبینید که هاله سبز رنگ پشت باکس قرمز و زرد از بین میرود.

float در css
 

حال برای حل این مشکل از float استفاده میکنیم که المان های ما را در صفحه شناور کند. به صورت زیر:

 

#main{
  background-color: rgba(20,150,60,0.5);
  position: absolute;
}

#firstdiv{
  float: left;
}

#seconddiv{
  float: left;
}

 

به این صورت المان ها را به چپ ترین حالت قرار میدهد و دیگر هاله سبز رنگ محو نمیشود.

float در css چیست
 

برای دیدن آموزش های بیشتر جزوات CSS را دنبال کنید.

 

قسمت قبل آموزش (آموزش position در CSS)

قسمت بعد آموزش (آموزش display و opacity در CSS)

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد.