مشکل 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>
پاسخها
5
درود...
کد زیر:
test{
display: inline-block;
}
به div که کلاس source داره width کم دادی جا نمیشن که ردیفی قرار بگیرن
یکم width کلاس source رو بیشتر کن
گفتگوهای مرتبط
شاید پاسخ شما همینجا باشد
در کل به جای استفاده از float از flex استفاده کن .
دوست عزیز
وقتی دارید فرزندان یک div همه رو float میدین قاعدتا div پرنت ارتفاع نمیگیره
به این منظور یکی از راهکار هایی که وجود داره اینه که یه عنصر با استایل clear: both زیر همه فرزندان تعریف شه
<style>
.clear {
clear: both;
}
</style>
....
<div class="source">
<div class="first"> </div>
<div class="second"> </div>
<div class="third"> </div>
<div class="clear"></div>
</div>در خصوص اینم که کنار هم قرار نمیگیرن چون عرض پرنت رو روی یک مقدار کمتر از مجموع عرض فرزندانش بستین که نمیذاره عناصر فرزند کنار هم قرار بگیرن
با سلام. از همه عزیزانی که به پرسش بنده پاسخ دادند تا مشکلم حل بشه، نهایت تشکر رو دارم🌸🌸🌸