کلیدستان

با سلام دوستان

من میخواستم این دو بخش که در عکس مشخص شده به جای اینکه زیر هم باشن کنار هم باشن

[attachment=1322]

این برای بخش صفحه سبد خرید ماست
ادرس سایتمونم www.puzel.ir می باشد

اگر کمک کنید ممنون میشم که از چه کدی باید استفاده کنم

با سلام.
توصیه می شود که از فایل W3.CSS که توسط سایت معتبر w3schools.com ارائه شده است، استفاده نمایید :

http://www.w3schools.com/w3css/default.asp

این فایل، علاوه بر اینکه امکان ساخت اینگونه ترکیب ها (تعدادی ستون در کنار هم) را به شما می دهد، ساختار سایت را هم responsive خواهد کرد. یعنی در صفحه نمایش های کوچک (مثل موبایل ها)، ستون ها جابجا می شوند و به جای کنار هم بودن در جهت افقی، یکی به ردیف بعد رفته و عملا در جهت عمودی قرار می گیرند تا کاربر به راحتی محتوای هر دو را ببیند (این ویژگی خیلی مهم است و در نهایت هرکس باید responsive بودن را برای سایت خود رعایت کند).
خود سایت w3schools.com ، راهنماهای زیادی برای استفاده از آن دارد که در همان لینک ذکر شده، موجود می باشند.
راهنما برای طراحی ستون های با اندازه های مختلف (به صورت 2 یا 3 یا 4 ستون و یا ترکیبی از یک دوم و یک سوم و یک چهارم عرض صفحه) :

http://www.w3schools.com/w3css/w3css_responsive.asp

راهنما برای طراحی ستون های با اندازه های مختلف (انعطاف پذیر با بخش پذیری به 12 قسمت و بر اساس سه اندازه صفحه نمایش small و medium و large) :

http://www.w3schools.com/w3css/w3css_grid.asp

مثلا تعریف ستون زیر را ببینید (بر اساس W3.CSS و حالت 12 قسمتی برای عرض صفحه) :


s مخفف small و m مخفف medium و l مخفف large می باشد. کد بالا یعنی ستون، در صفحه نمایش با اندازه small ، به اندازه 5 قسمت از 12 قسمت کل (کل عرض صفحه)، عرض صفحه نمایش را بپوشاند (اندازه عرض آن برابر پنج دوازدهم از کل عرض صفحه نمایش باشد). برای medium به اندازه 4 قسمت از 12 قسمت و برای large به اندازه 3 قسمت از 12 قسمت (به اعداد در نام کلاس ها توجه کنید).

نکته مهم : در توضیحات بالا، بنده لغت ((صفحه نمایش)) را به کار بردم زیرا فرض کرده ام که عنصری که این ستون را در بر گرفته، کل صفحه نمایش را می پوشاند، در صورتی که صحیح تر این است که بگوییم پنج دوازدهم عرض ((عنصر حاوی این ستون)).

سلام.
توصیه اصلی بنده در ارسال قبل ذکر شده است، اما اگر یک راه حل سریع و ساده را می خواهید (بدون استفاده از هیچ فایل CSS ای)، کلید زیر می تواند مفید باشد :

کلید شماره 2501