چگونه با html یک قالب ستونی خوب بسازیم
طه |
يكشنبه, ۲۰ آذر ۱۳۹۰، ۰۸:۴۰ ق.ظ |
۰ نظر
یکی از مسائلی که همه با آن مطرح هستند.، ساخت یک قالب با یک یا دو ستون است. مواردی که معمولا مشکل ساز می شوند، موارد زیر هستند:
- دوست داریم به صورت حداقلی از float استفاده کنیم تا مشکلات بعدی رخ ندهد.
- دوست داریم در هیچ مرورگری مشکلی نداشته باشد.
- دوست داریم عرض کل طرح ثابت نباشد (قابل تغییر باشد)، یعنی مثلا کل صفحه یا ۹۰ درصد صفحه را بگیرد.
- دوست داریم عرض ستون کناری ثابت نباشد، مثلا ۱۰ درصد صفحه
در مجموع راه حل زیر به نظر بهترین راه حل است:
قاب اصلی { width: 90% } میتواند طول ثابت یا متغیر داشته باشد
ستون کناری
{ float:right; width: 200px }
میتواند طول ثابت یا متغیر داشته باشد
{ margin-right: 210px }
دقت کنید که float نیست.
دقت کنید که float نیست.
قسمت قرار دادن محتوا
{ float: right; width: 100% }
دلیل اصلی وجود این div امکان استفاده از clear:both داخل همین div است
{ float: right; width: 100% }
دلیل اصلی وجود این div امکان استفاده از clear:both داخل همین div است
clear:both
برای اینکه قسمت اصلی همیشه بزرگتر یا مساوی ستون کناری باشد، البته محتوای این div خالی و بنابراین عرض آن صفر خواهد بود.
برای اینکه قسمت اصلی همیشه بزرگتر یا مساوی ستون کناری باشد، البته محتوای این div خالی و بنابراین عرض آن صفر خواهد بود.
- ۰ نظر
- ۲۰ آذر ۹۰ ، ۰۸:۴۰