sinoser
پنج شنبه 22 مرداد 1394, 12:27 عصر
آقا با همین margin-right درست شد
بزار مشکل اصلیم با فلوت بگم
مشکلم اینه من دقیق نمیدونم برای درست کردن این عکس باید دقیقا کدوما فلوت کنم
http://s2.img7.ir/rqcvp_t.jpg (http://img7.ir/view/s2/rqcvp)
و کدوم فلوت راست یا چپ بدم و کجا باید از clear استفاده کنم
اگه بتونید فقط فلوت کردن اینو (کدها) با یه توضیح کوچول بدید مثلا چرا اینجا فلوت راست شده و چرا اون یکی چپ فکر کنم کامل راه بیفتم
میدونم وقت گیره ولی اگه بشه ازتون ممنون میشم چون جاهای دیگه مشکل ندارم مشکل اصلیم همین فلوته
خب واس این ساختارت کد ساده زیر رو ج میده برررسیش کن خیلی چیزا می فهمی.
در ادرس زیر هم مثال عملی هست.
http://jsfiddle.net/sinoser/uj0ze08n/
<div> header </div>
<div> nav </div>
<div style="float:left; width:20%;"> lpanel </div>
<div style="float:left; width:50%;"> mpanel </div>
<div style="float:left; width:30%;"> rpanel </div>
<div style="clear:left;"> footer </div>
div{box-sizing : border-box; border:1px solid red; padding:10px;}
box-sizing : border-box باعث میشه اون padding و border ی که دادم خود به خود از عرض باکس کم بشه تا عرض همون مقداری بشه که دادیم نه این که عرض حقیقی بشه width+padding+border.
پس این گزینه خوبیه بوت استرپم هم از این ویژگی برای گرید سیستمش استفاده کرده.
اما میرسیم به float. من باکس های عرض رو کاری نکردم چون کل عرض رو میگیرن دیگه مهم نیست چپ باشن یا راست.
اون سه تای وسط رو امدم float دادم اونم همه رو به یک سمت می شد همشونم right داد ولی نکتش اینه باید همشون مثل هم باشه چون این باکس ها از هم نظام مییگرن یعنی فاصله بیشون مهمه می تونم با margin هم فاصله بینشون رو دقیق تنظیم کنم. اما یه زمانی هست که دوتا المان فاصله بینشون مهم نیست و همچنین مجموع عرض حقیقیشون از عرض باکس پدر کمتر هست میشه یکی رو راست داد یکی رو چپ ولی خب این روش تقریبا به کار نمیاد. خیییییلی کم .
فوتر رو هم clear دادم چون فلوت عناصر بالا left بود ایونو left دادم اگر راست میدادم right بود. و اگر اون حالت کم استفاده بود که هر کدوم یه وری both یعنی هر دو طرف رو میدادم.