یه مورد عجیب: چرا وقتی با div یه کلاس رو اعمال میکنیم، اعمال نمیشه ولی اگه inline بنویسیم چرا!

[sahel65]

سلام؛
یه مشکل عجیب برام پیش اومده:
به این تکه کد CSS نگاه کنید:
.box{
background-color:#999;
width:300px;
height:280px;
}

#rightbox{
float:right;
}

#centerbox{
float:right;
margin-right:20px;
}

#leftbox{
float:left;
}
حالا:
1) این هم کد Html : در این حالت اصلا اندازه ها و اون طرز قرارگیری که مد نظرم هست، اعمال نمیشه:



<div class="box">
<div id="rightbox">
</div>

<div id="centerbox">
</div>

<div id="leftbox">
</div>
</div>
2) ولی در این شبه کد اعمال میشه:


<div id="rightbox" class="box">
</div>

<div id="centerbox" class="box">
</div>

<div id="leftbox" class="box">
</div>
چرا آخه؟؟ مگه کد بالایی چه فرقی با این پایینی داره؟؟؟ من میخوام مثل کد 1 بنویسم که استانداردتر باشه و فقط یه بار class متعلق به box نوشته بشه ، نه اینکه تو هر سه خط هی بنویسم class box.
گیج شدم.

[mmdsharifi]

می تونید به تمام دیو های فرزند اولی اینطوری استایل بدی اینجوری:


.box>div
{

}

[sahel65]

خب آخه سوال من اینه که چرا کد اولی که منطقی هم نوشته شده جواب نمیده!! یعنی چی آخه؟؟ اونا رو بردم تو classی به نام box ! خب چرا جواب نده اینجوری؟؟!!

[sahel65]

دوستان یعنی سوالم اینقدر سخته؟؟

[aslan]

سلام
اگر درست فهمیده باشم شما از کدی که نوشتین انتظار دارین که div های داخلی خصوصیات div با کلاس box را داشته باشن.!!! ..... در حالیکه این موضوع تضاد منطقی دارد .... قرار گرفتن سه تا دایو مثلا با width:300px داخل یک دایو با همین width ???!!!!!!
https://jsfiddle.net/jtrog2gx/4/

[sahel65]

خب اصلان آقا، چرا وقتی که بصورت Inline می نویسم جواب میده؟؟ پس اونجا هم نباید جواب بده دیگه آقا. یا اینطوری نیستش؟؟
و ثانیا من که بهشون float دادم که یعنی کدوم منطقه بیفتن، اینجوری دیگه روی هم دیگه نمی افتن Div های ایجاد شده.
غیر از اینه؟؟
من میگم مگه وقتی که Inline می نویسیم تضاد منطقی که شما می فرمایین دیگه رفع میشه؟؟

[davood59]

ساحل جان شما اگه این خط رو به انتهای کلاس box اضافه کنی،بنظر مشکلت حل بشه:
display:inline

[SEO Artist]

خب به خاطر اینه که شما فقط برای کلاس box از اتریبیوت width استفاده کردی. تو قطعه کد اول اون رو به کانتینر div دادی و width رو فقط برای div اول در نظر می گیره.
ولی تو قطعه کد دوم چون هر کدوم از box ها width دارن، درست نمایش داده میشن.
شما اگه به id های هر کدوم از box ها width مناسب بدید مشکلتون حل میشه.