محبوبترینها
نمایش جنگ دینامیت شو در تهران [از بیوگرافی میلاد صالح پور تا خرید بلیط]
9 روش جرم گیری ماشین لباسشویی سامسونگ برای از بین بردن بوی بد
ساندویچ پانل: بهترین گزینه برای ساخت و ساز سریع
خرید بیمه، استعلام و مقایسه انواع بیمه درمان ✅?
پروازهای مشهد به دبی چه زمانی ارزان می‌شوند؟
تجربه غذاهای فرانسوی در قلب پاریس بهترین رستوران‌ها و کافه‌ها
دلایل زنگ زدن فلزات و روش های جلوگیری از آن
خرید بلیط چارتر هواپیمایی ماهان _ ماهان گشت
سیگنال در ترید چیست؟ بررسی انواع سیگنال در ترید
بهترین هدیه تولد برای متولدین زمستان: هدیه‌های کاربردی برای روزهای سرد
در خرید پارچه برزنتی به چه نکاتی باید توجه کنیم؟
صفحه اول
آرشیو مطالب
ورود/عضویت
هواشناسی
قیمت طلا سکه و ارز
قیمت خودرو
مطالب در سایت شما
تبادل لینک
ارتباط با ما
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
آمار وبسایت
تعداد کل بازدیدها :
1827988035
قرار گرفتن چند 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]
[تعداد بازديد از اين مطلب: 5755]
-
گوناگون
پربازدیدترینها