سینا
3 سال پیش توسط سینا مطرح شد
5 پاسخ

مشکل float در CSS

سلام دوستان روزتون بخیر. علت اینکه من سه تا div هام رو داخل یک div با کلاس source قرار دادم.

وقتی میخام سه تا دایو رو به صورت float:left قرار بردم، وقتی داخل دایو منبع هستن به صورت خطی قرار نمیگیرن و به صورت ستونی در چپ قرار میگیرن، اما وقتی دایو منبع(source) رو حذف میکنم اون سه تا دایو حالت float:left براشون فعال میشه و به صورت سطری ایجاد میشن.علتش چیه؟؟ چون توی کلیپ اموزشی برای استادش فعال شد ولی برای من فقط در حالت حذف دایو source ، ایجاد میشه.

Html code

</head>
<body>
  <div class="source">
    <div class="first"> </div>
    <div class="second"></div>
    <div class="third"></div>
  </div>
</body>
</html>

Css code

.source{  
border: 1px solid blue;  
/*background-color: darkorange;*/  
width: 500px;  
}  
.first{  
width: 300px;  
height: 200px;  
background-color: yellow;  
float: left;  
}  
.second{  
width: 300px;  
height: 200px;  
background-color: red;  
float: left;  
}  
.third{  
width: 300px;  
height: 200px;  
background-color: darkmagenta;  
float: left;  
}

</body></html>

ثبت پرسش جدید
رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 3 سال پیش آپدیت شد
-1

درود...
کد زیر:

test{
display: inline-block;
}

Yasin
تخصص : Laravel
@yasinFaraji 3 سال پیش مطرح شد
0

به div که کلاس source داره width کم دادی جا نمیشن که ردیفی قرار بگیرن
یکم width کلاس source رو بیشتر کن


رضا شونم
تخصص : طراح سایت و سئو کار
@rosi 3 سال پیش مطرح شد
-1

در کل به جای استفاده از float از flex استفاده کن .


Ali Duzandeh Ferdows
تخصص : front end
@alidf1372 3 سال پیش مطرح شد
0

دوست عزیز

وقتی دارید فرزندان یک div همه رو float میدین قاعدتا div پرنت ارتفاع نمیگیره
به این منظور یکی از راهکار هایی که وجود داره اینه که یه عنصر با استایل clear: both زیر همه فرزندان تعریف شه

<style>
.clear {
clear: both;
}
</style>

....

<div class="source">
    <div class="first">&nbsp;</div>
    <div class="second">&nbsp;</div>
    <div class="third">&nbsp;</div>
    <div class="clear"></div>
</div>

در خصوص اینم که کنار هم قرار نمیگیرن چون عرض پرنت رو روی یک مقدار کمتر از مجموع عرض فرزندانش بستین که نمیذاره عناصر فرزند کنار هم قرار بگیرن


سینا
@sinanayebi76 3 سال پیش مطرح شد
0

با سلام. از همه عزیزانی که به پرسش بنده پاسخ دادند تا مشکلم حل بشه، نهایت تشکر رو دارم🌸🌸🌸


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام