نکات لایه بندی صفحه بدون استفاده از Float،در طراحی سایت

ساخت وبلاگ

از inline-block به کارگیری فرمایید ! طراحی سایت خواص disply ترکیبی از Float و Position میباشد، به طور معمولی، المنت های block می توانند آحاد پهنا عنصر پدرشان را تصرف نمایند و تک تک المنت های دیگر را به خط بعدی هل بدهند، در حالی که المنت های inline صرفا به اندازه ی پهنا خویش گوشه و کنار اشغال میکنند و به سایر عنصرها inline اذن می‌دهند در به عبارتی خط در کنار آنان قرار بگیرند. استعمال از خواص display:inline-block سبب ساز می‌گردد پباده سازی غالب تری داشته باشیم، به عنوان مثال به یک تکه متن در داخل یک تگ تصور کنید، متن های درون باهم inline هستند ولی خویش تگ به تنهایی block-level میباشد، برای ادراک بهتر این اخلاق، می‌توانیم در یک نمونه از display با خواص inline-block به کارگیری کنیم تا محتوای آن را کنار همدیگر در اختیار بگذاریم، به جهت اینکه مجموع المنت های ما در وضعیت normal flow میباشند، مشکلی با سقوط و افتادن المنت بابا نداریم، این یکی راه و روش های مطلوب چهت نیل به یک چاره خوب میباشد، همینطور این نمونه را ملاحظه کنید.

تکنیک را حافظه بگیرید !
 

این متد در کل نقاطی که می‌خواهید از جهت دهی معمولی به کار گیری نمائید به فعالیت می‌آید، بیایید نگاهی به موقعیت محتوا/سایدبار بیندازیم، برای HTML یک المنت بابا داریم به اسم wrapper که دو فرزند درونش داراست، کد HTML :

 

 کد CSS :

 

به همین راحتی main content و side bar را در کنارهم داریم.

درین نمونه جهت گیری با دقت به دلیل گیری متن باطن wrapper شکل می گیرد، هرچند جهت گیری به طور دیفالت به سمت چپ میباشد و نیازی وجود ندارد که کاری اعمال دهیم، البته به راحتی می توانید این جهت دهی را به سمت میانه و راست قرار دهید در حالتی‌که که ایفا همچین کاری بوسیله float غیرقابل ایفا بود، به کامنت no spaces فی مابین دو فرزند div داخل بابا wrapper توجه فرمائید، برای این عمل عامل قابل قبولی داریم و به دنبال آن را توضیح خوا‌هیم اعطا کرد.

حرفه ای ترین مرجع طراحی سایت در مشهد...
ما را در سایت حرفه ای ترین مرجع طراحی سایت در مشهد دنبال می کنید

برچسب : طراحی سایت در مشهد, نویسنده : علی سلطانی webdeesign بازدید : 157 تاريخ : دوشنبه 17 خرداد 1400 ساعت: 17:56