مبتدی: مشکل CSS [بایگانی]

ashkandehnavi

چهارشنبه 02 مرداد 1392, 12:58 عصر

سلام من این کد رو نوشتم میخوام بدونم کجاش مشکل داره که وقتی DIV های زیرین زیاد میشه DIV بالایی ارتفاعش ثابته من نتونستم جواب سوالمو پیدا کنم ممنون اگه کمک کنید

<div style="position:relative;top:15px;margin:0 auto;width:750px;min-height:100px;background-color:gray">
<div style="position:relative;float:right;margin:10px 10px 10px 10px;width:230px;height:300px;background-color:yellow;text-align:center">test</div>
<div style="position:relative;float:right;margin:10px 10px 10px 10px;width:230px;height:300px;background-color:yellow;text-align:center">test</div>
<div style="position:relative;float:right;margin:10px 10px 10px 10px;width:230px;height:300px;background-color:yellow;text-align:center">test</div>
<div style="position:relative;float:right;margin:10px 10px 10px 10px;width:230px;height:300px;background-color:yellow;text-align:center">test</div>
<div style="position:relative;float:right;margin:10px 10px 10px 10px;width:230px;height:300px;background-color:yellow;text-align:center">test</div>
<div style="position:relative;float:right;margin:10px 10px 10px 10px;width:230px;height:300px;background-color:yellow;text-align:center">test</div>
</div>

107832

ateryad

چهارشنبه 02 مرداد 1392, 13:32 عصر

برای div والد خاصیت ;clear:both را هم اضافه کنید.
و بنظرم خاصیت position والد رو باید به absolute تغییر بدهید.

H:Shojaei

چهارشنبه 02 مرداد 1392, 13:51 عصر

برای div والد خاصیت ;clear:both را هم اضافه کنید.
و بنظرم خاصیت position والد رو باید به absolute تغییر بدهید.

آره اگه absolute باشه درست ميشه ولي باز خاصيت margin:0 auto; ديگه كار نميكنه.

بهزاد علی محمدزاده

چهارشنبه 02 مرداد 1392, 15:42 عصر

IamOverlord

چهارشنبه 02 مرداد 1392, 20:04 عصر

سلام!
وقتی برای div فرزند float رو برابر right یا left گذاشتی، برای div والد از overflow: auto استفاده کن:

<style>
#parentdiv {
overflow: auto;
}
</style>

<div id="parentdiv" style="position:relative;top:15px;margin:0 auto;width:750px;min-height:100px;background-color:gray">
<div style="position:relative;float:right;margin:10px 10px 10px 10px;width:230px;height:300px;background-color:yellow;text-align:center">test</div>
<div style="position:relative;float:right;margin:10px 10px 10px 10px;width:230px;height:300px;background-color:yellow;text-align:center">test</div>
<div style="position:relative;float:right;margin:10px 10px 10px 10px;width:230px;height:300px;background-color:yellow;text-align:center">test</div>
<div style="position:relative;float:right;margin:10px 10px 10px 10px;width:230px;height:300px;background-color:yellow;text-align:center">test</div>
<div style="position:relative;float:right;margin:10px 10px 10px 10px;width:230px;height:300px;background-color:yellow;text-align:center">test</div>
<div style="position:relative;float:right;margin:10px 10px 10px 10px;width:230px;height:300px;background-color:yellow;text-align:center">test</div>
</div>

css-man

چهارشنبه 02 مرداد 1392, 20:58 عصر

خواهشا اینجوری سی اس اس ننویس فایلهارو جدا کن تا خوندن و ویرایشش راحت باشه

ashkandehnavi

چهارشنبه 02 مرداد 1392, 21:50 عصر

سلام!
وقتی برای div فرزند float رو برابر right یا left گذاشتی، برای div والد از overflow: auto استفاده کن:

<style>
#parentdiv {
overflow: auto;
}
</style>

<div id="parentdiv" style="position:relative;top:15px;margin:0 auto;width:750px;min-height:100px;background-color:gray">
<div style="position:relative;float:right;margin:10px 10px 10px 10px;width:230px;height:300px;background-color:yellow;text-align:center">test</div>
<div style="position:relative;float:right;margin:10px 10px 10px 10px;width:230px;height:300px;background-color:yellow;text-align:center">test</div>
<div style="position:relative;float:right;margin:10px 10px 10px 10px;width:230px;height:300px;background-color:yellow;text-align:center">test</div>
<div style="position:relative;float:right;margin:10px 10px 10px 10px;width:230px;height:300px;background-color:yellow;text-align:center">test</div>
<div style="position:relative;float:right;margin:10px 10px 10px 10px;width:230px;height:300px;background-color:yellow;text-align:center">test</div>
<div style="position:relative;float:right;margin:10px 10px 10px 10px;width:230px;height:300px;background-color:yellow;text-align:center">test</div>
</div>

تشکر مشکلم با overflow حل شد

qartalonline

چهارشنبه 02 مرداد 1392, 22:44 عصر

بهتره از روش اصولی و استاندارد استفاده کنید بصورت زیر:
<style>
.par{
position:relative;
top:15px;
margin:0 auto;
width:750px;
min-height:100px;
background-color:#999
}
.block{
position:relative;
float:right;
margin:10px;
width:230px;
height:300px;
background-color:#FF0;
text-align:center
}
.clear{
clear:both
}
</style>

<div class="par">
<div class="block">test</div>
<div class="block">test</div>
<div class="block">test</div>
<div class="block">test</div>
<div class="block">test</div>
<div class="block">test</div>
<div class="clear"></div>
</div>

ashkandehnavi

چهارشنبه 02 مرداد 1392, 22:54 عصر

بهتره از روش اصولی و استاندارد استفاده کنید بصورت زیر:
<style>
.par{
position:relative;
top:15px;
margin:0 auto;
width:750px;
min-height:100px;
background-color:#999
}
.block{
position:relative;
float:right;
margin:10px;
width:230px;
height:300px;
background-color:#FF0;
text-align:center
}
.clear{
clear:both
}
</style>

<div class="par">
<div class="block">test</div>
<div class="block">test</div>
<div class="block">test</div>
<div class="block">test</div>
<div class="block">test</div>
<div class="block">test</div>
<div class="clear"></div>
</div>
ممنونم واقعا

ashkandehnavi

پنج شنبه 03 مرداد 1392, 11:50 صبح

این clear دقیقا چیه؟
فقط برا همین کار باید ازش استفاده کرد؟

IamOverlord

پنج شنبه 03 مرداد 1392, 12:07 عصر

سلام!
این مطلبی که لینکش رو گذاشتم بخون... سه تا روش رو برای حل این مشکل گفته... این روش هایی که گذاشتیم توش هست: http://css-tricks.com/all-about-floats (http://css-tricks.com/all-about-floats/)

na_des

پنج شنبه 03 مرداد 1392, 22:11 عصر