چند ستونه کردن Div
در این مقاله قصد داریم با روشی ساده و بدون استفاده از bootstrap و جداول یک div را به چند بخش تقسیم کنیم.
برای چند ستونه کردن div ها روش های مختلفی وجود دارد. امروز قصد داریم دو تا از ساده ترین راه های آن را معرفی کنیم و میخواهیم این روش را بدون استفاده از bootstrap و جداول پیاده سازی نماییم.
خب ابتدا یک صفحه اچ تی ام ال ایجاد کنید و کد های زیر را در آن قرار دهید:
<html> <head> <title> چند ستونه سازی div </title> </head> <body> <div class="main"> <div class="col"> ستون اول </div> <div class="col"> ستون دوم </div> <div class="col"> ستون سوم </div> <div class="col"> ستون چهارم </div> </div> </body> </html>
روش اول:
می خواهیم با استفاده از خاصیت diplay این کار را انجام دهیم حال کد های زیر را در بخش head قرار دهید:
<style> *{ text-align:center; } .main{ width:414px; border:solid 3px red; text-align:center; } .col{ width:100px; display:inline-block; } </style>
روش دوم:
می خواهیم روش دوم را با استفاده از خاصیت float پیاده سازی کنیم برای اینکار کد های زیر را در بخش head قرار دهید:
<style> *{ text-align:center; } .main{ width:414px; border:solid 3px red; overflow:auto; } .col{ width:100px; float:right; } </style>
از لینک زیر میتوانید نمونه های کامل ایجاد شده را دانلود نمایید.
نظرات
