تبلیغات
تبلیغات متنی
محبوبترینها
بارش‌های سیل‌آسا در راه است! آیا خانه شما آماده است؟
بارش‌های سیل‌آسا در راه است! آیا خانه شما آماده است؟
قیمت انواع دستگاه تصفیه آب خانگی در ایران
نمایش جنگ دینامیت شو در تهران [از بیوگرافی میلاد صالح پور تا خرید بلیط]
9 روش جرم گیری ماشین لباسشویی سامسونگ برای از بین بردن بوی بد
ساندویچ پانل: بهترین گزینه برای ساخت و ساز سریع
خرید بیمه، استعلام و مقایسه انواع بیمه درمان ✅?
پروازهای مشهد به دبی چه زمانی ارزان می‌شوند؟
تجربه غذاهای فرانسوی در قلب پاریس بهترین رستوران‌ها و کافه‌ها
دلایل زنگ زدن فلزات و روش های جلوگیری از آن
خرید بلیط چارتر هواپیمایی ماهان _ ماهان گشت
صفحه اول
آرشیو مطالب
ورود/عضویت
هواشناسی
قیمت طلا سکه و ارز
قیمت خودرو
مطالب در سایت شما
تبادل لینک
ارتباط با ما
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
آمار وبسایت
تعداد کل بازدیدها :
1836501769
قرار گرفتن چند div در کنار یکدیگر -
واضح آرشیو وب فارسی:سایت ریسک: قرار گرفتن چند div در کنار یکدیگر Helen_Farhani 30 مرداد 1387, 00:36من میخواهم که چند div را در داخل یک table قرار دهم. با توجه به اینکه width هر یکی از div ها بر اساس درصدی از پهنای table باشد. مثال:یک جدول که پهنای آن با درصد تعیین شده است (100%) در داخل این جدول 3 تا div قرار بگیرد که پهنای هر یک برابر با 30% از پهنای جدول اصلی باشد و در کنار یکدیگر قرار گرفته باشند. در واقع شکل ظاهری این مثال مانند یک جدول با یک ردیف و سه ستون است که پهنای هر یکی از سلولهای جدول برابر است با 30 درصد از پهنای کل جدول. reza 699 30 مرداد 1387, 00:43خوب شما توجه داشته باش که دایو ها رو که بهشون width میدی . بهشون float هم بده تا کنار هم قرار بگیرن وگرنه زیر هم دیگه قرار میگیرن . مثلا همشونو float :left بده تا کنار هم قرار بگیرن nasser_ray 30 مرداد 1387, 02:50فکر می کنم با استفاده از align و استفاده از clear:none مشگل شما کاملاً حل بشه reza 699 30 مرداد 1387, 08:04فکر می کنم با استفاده از align و استفاده از clear:none مشگل شما کاملاً حل بشه clear که به صورت پیشفرض none هستش. Helen_Farhani 30 مرداد 1387, 09:59تصویر زیر را ببینید. اون چیزی نیست که مورد نظر من است. کد مربوط به تصویر بالا: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta "Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- .thumbnail { float: left; width: auto; border: 1px solid #999; margin: 15px; padding: 5px; } .clearboth { clear: both; } --> </style> </head> <body> <table width="100%" border="1" cellspacing="0" cellpadding="0" style="background-color:#CCCCCC"> <tr> <td> <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br> Caption </div> <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br> Caption </div> <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br> Caption </div> <br class="clearboth"> <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br> Caption </div> <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br> Caption </div> <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br> Caption </div> </td> </tr> </table> </body> </html> Mahdi_20 30 مرداد 1387, 11:11خب مگه شما نمي خواي width =30% باشه پس چرا گذاشتي auto ؟ width رو برابر 30% بزار البته اين كار به خاطر padding و margin يه مشكلاتي داره من اين رو امتحان كردم %25 قرار دادم تقريبا درست ميشه.. ولي وقت نكردم تستش كنم..اين padding و margin رو كم و زياد كن درست ميشه.. Helen_Farhani 30 مرداد 1387, 13:07مشکل من همین padding و margin هست. به این دلیل که این صفحه بصورت داینامیک ایجاد میشه و ممکن است بر اساس تنظیمات کاربر در هر ردیف 3 یا چند div وجود داشته باشد نتیجتا باید کاری کنم که نیاز به تنظیم و مقدار دهی دستی نباشد و فقط مقدار padding و margin را در فایل css تعیین کنم و مقدار width هر یکی از div ها درصدی از پهنای جدول اصلی باشد ( 100% تقسیم بر تعداد div ها ) Mahdi_20 30 مرداد 1387, 15:48شما تو کد خودتون از Width:auto استفاده کردین. خب اگه میخوایین 30% باشه اون رو به این شکل تغییر دهید : Width:30% شاید هم میخوائین padding و margin متغییر باشند؟ کدومش؟ میخوایین اندازه Div متغییر باشه میخوایین padding و margin متغییر باشند یا انکه هردو؟ Helen_Farhani 31 مرداد 1387, 09:49شما تو کد خودتون از Width:auto استفاده کردین. خب اگه میخوایین 30% باشه اون رو به این شکل تغییر دهید : Width:30% شاید هم میخوائین padding و margin متغییر باشند؟ کدومش؟ میخوایین اندازه Div متغییر باشه میخوایین padding و margin متغییر باشند یا انکه هردو؟ میخواهم اندازه Div متغیر باشه و مقدار paddign و margin ثابت. echessdesign 01 شهريور 1387, 10:15درود بر شما اگر منظور شما را درست متوجه شده باشم، شما بدون دادن مقدار به خصیصه width نمی توانید 3 Block Level را در کنار هم در یک جدول نگه دارید... Helen_Farhani 01 شهريور 1387, 12:50پس باید چکار کنم؟ echessdesign 01 شهريور 1387, 17:34درود بر شما در صورتی که مقدار DIV اول، از مقدار جدول بیشتر باشد، دو DIV دیگر را به زیر می کشد، شما می توانید از max-height استفاده نمایید. در این رابطه در انجمن مفصل بحث شده است، جستجو فرمایید. پاینده باشید. Helen_Farhani 10 شهريور 1387, 12:11شما متوجه منظور من نشدید ( البته اینطور فکر میکنم ) کد زیر را لطفا ببینید. (تصویر زیر خروجی همین کد است) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta "Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- .thumbnail { float: left; width: 25%; border: 1px solid #999; margin: auto; padding: 0; } .clearboth { clear: both; } --> </style> </head> <body> <table width="100%" border="1" cellspacing="0" cellpadding="0" style="background-color:#CCCCCC"> <tr> <td> <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br> Caption </div> <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br> Caption </div> <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br> Caption </div> <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br> Caption </div> <br class="clearboth"> <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br> Caption </div> <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br> Caption </div> <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br> Caption </div> <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br> Caption </div> </td> </tr> </table> </body> </html> با اینکه پهنای هر یکی از div ها را 25% قرار داده ام، باز هم یکی از آنها به زیر 3 تای بالایی میرود در حالی که منطقا باید هر چهار div در یک سطر قرار بگیرد. این مشکل با تغییر مقدار 25% درصد به مقادیر کمتر (مثلا 24%) حل میشود. اما مشکل این است که من میخواهم به یک رابطه منطقی برسم که بتوانم همچین ساختاری را بصورت داینامیک ایجاد کنم ( مثلا وقتی پنج div دارم پهنای هر یک 20% باشد و اگر اگر n تا div باشد مقدار پهنای هر یکی از تقسیم 100 درصد بر تعداد div ها بدست بیاید.) مثلا echessdesign 10 شهريور 1387, 12:42درود بر شما تازه متوجه منظور شما شدم، شما همیشه باید یک در صد کمتر از مجموع کل مقدار دهی کنید = %90 کافیست که به یکی از Div خود، یک درصد کمتر از بقیه دهید: <div class="thumbnail" style="width:24%;"> maxpelank 10 شهريور 1387, 13:53با سلام اگر منظورتون رو درست متوجه شده باشم شما 3 تا ستون می خوای که بر اساس داده های درون اون ها اندازه اون ها متغیر باشه . برای این کار شمامیتونی به صورت زیر عمل کنی یعنی فقط مقدارpadding وmargin رو مشخص کنی برای هر ستون بعد به هر کدوم float: left; بدی بعدش هم در اخر یک کدdiv با #footer { background: #0f0; clear: both; width: 100%; } بدی : اینجوری بزاری : بعد با کد مشکلت حل بشه اگر نشد مش تونی نمونه زیر رو نگاه کنی و اگر هم بیشتر توضیح خواستی رو نمونه زیر من هستم . <html> <head> <title>THREE-COLUMN LIQUID LAYOUT WITH FLOATING BOXES</title> <style type="text/css"> <!-- body { margin: 0px; padding: 0px; } #header { background: #0f0; width: 100%; } #leftcol { background: #f00; float: left; width: 20%; height: 500px; } #rightcol { background: #f00; float: right; width: 20%; height: 500px; } #content { background: #fff; float: left; width: 59%; height: 500px; } #footer { background: #0f0; clear: both; width: 100%; } --> </style> </head> <body> <div id="header">Header Section</div> <div id="leftcol">Left Section</div> <div id="rightcol">Right Section</div> <div id="content">Content Section</div> <div id="footer">Footer Section</div> </body> </html> این هم عکس نمایش داده شده این کد بالا این هم لینک سایتی که من خودم از اون خیلی بهره بردم امید وارم به دردتون بخوره واسه ی من خیلی مفید بود.
این صفحه را در گوگل محبوب کنید
[ارسال شده از: سایت ریسک]
[مشاهده در: www.ri3k.eu]
[تعداد بازديد از اين مطلب: 5760]
-
گوناگون
پربازدیدترینها