قرار دادن Margin برای طرح ساده ریسپانسیو

این تاپیک 5 پاسخ و 3 مشارکت کننده دارد . آخرین آپدیت توسط :  محمد اسفندیاری ،‏ 3 ماه و 4 هفته پیش .

این تاپیک تاکنون 144 بازدید داشته است .

نویسنده پست
یکشنبه ، 7 آگوست 2016     10:38 ب.ظ #


hamedt

Subscriber
8 پست2 تاپیک

سلام.
من یه طرح ریسپانسیو ساده دارم. میخوام وقتی عرض مرورگر تو حالت دسکتاپ هست سه تا باکس در کنار هم قرار بگیرن و هر چی عرض مرورگر کمتر میشه عرض اون ها هم کمتر بشه تا عرض مرورگر به عرض مشخص شده برای تبلت برسه. حالا دو تا باکس اول کل عرض صفحه رو می گیرن و باکس سوم به زیر میره و عرض اون 100% میشه. و وقتی عرض مرورگر به عرض موبایل میرسه 3 تا باکس با عرض 100% زیر همدیگه قرار میگیرن. (مطابق عکس و فایل ها)
 

طرح رو پیاده کردم. فقط مشکل من اینه که وقتی میخوام به باکس ها Margin بدم تا از همدیگه فاصله بگیرن ، طرح به هم می ریزه و باکس سمت راست میره زیر در حالی که هنوز عرض صفحه رو کم نکردم. ممنون میشم یکی از دوستان راه حل بدن یا کد رو اصلاح و مجدداً قرار بدن (اگر کد بهینه تر و مرتب تر میشه لطفا همینجا قرار بدید)

 

فایل ها و عکس رو ملاحظه بفرمایید.

 

با تشکر

پیوست ها:
You must be logged in to view attached files.
0  تشکر
:: این تاپیک، پاسخ تائیدشده دارد : مشاهده پاسخ تائید شده توسط سوال کننده
یکشنبه ، 7 آگوست 2016     10:55 ب.ظ #


محمد ملکی

Subscriber
76 پست6 تاپیک

برای این کار اندازه باکس باید با margin محاسبه شود پس طول هر باکس نباید کاملا دقیق باشه پس margin جز طول باکس اگر می خواهید از راحت شوید باید از flex استفاده کنید که خودش انجام میده و اندازه دقیق لازم نیست شما می توانید از فریم ورک دییسبا نیز استفاده کنید که نمونه قالب ورود اون flex

0  تشکر
یکشنبه ، 7 آگوست 2016     11:05 ب.ظ #


hamedt

Subscriber
8 پست2 تاپیک

سلام دوست عزیز. از فریم ورک نمی خوام استفاده کنم

0  تشکر
یکشنبه ، 7 آگوست 2016     11:06 ب.ظ #


محمد ملکی

Subscriber
76 پست6 تاپیک

فردا کد اصلاح شده.ات رو میزارم

0  تشکر
یکشنبه ، 7 آگوست 2016     11:23 ب.ظ #


hamedt

Subscriber
8 پست2 تاپیک

ممنون. پس منتظرم

0  تشکر
یکشنبه ، 7 آگوست 2016     11:23 ب.ظ # پاسخ تائید شده توسط سوال کننده


محمد اسفندیاری

Authorplus
VIP
817 پست10 تاپیک

بفرمایید دوست عزیز

پیوست ها:
You must be logged in to view attached files.
2  تشکر
پست 1 تا 6 (از مجموع 6 پست)

این تاپیک پاسخ تائید شده دارد و بسته شده است .