پهنای درصدی

درصد، یک واحد اندازه گیری است که به اندازه ی بلاک در بر گیرنده ی عنصر وابسته است. برای عکس‌های فوق العاده خوب است: در اینجا ما یک عکس را همیشه 50٪ در عنصر دربرگیرنده ی آن قرار می‌دهیم. سعی کنید که صفحه را تغییر اندازه دهید تا ببینید چه می‌شود!

article img {
  float: right;
  width: 50%;
}
<article class="clearfix"> an image

همچنین شما می‌توانستید از min-width و max-width استفاده کنید تا حداقل و حداکثر اندازه ای که تصویر می‌تواند بپذیرد را مشخص کنید.

</article>

پیکربندی با اندازه‌های درصدی

برای پیکربندی می‌توانید از اندازه‌های درصدی هم استفاده کنید، اما این حالت کار بیشتری را می‌طلبد. در این مثال مطالب درون nav به شکل ناخوشایندی با تغییر اندازه ی صفحه کشیده می‌شود، حتی وقتی که صفحه خیل باریک باشد. البته خوشایند بودن و نبودن چنین حالتی به نوع محتوای شما هم وابسته است.

nav {
  float: left;
  width: 25%;
}
section {
  margin-left: 25%;
}
<div class="container">
<section>

وقتی که این پیکربندی خیلی باریک باشد، nav یک حالت له شده و فشرده ی ناخوشایندی را به خود می‌گیرد. بدتر آنکه شما از min-width در nav نمیتوانید استفاده کنید تا این مشکل را برطرف کنید، زیرا ستون سمت راست از آن پیروی نمی‌کند.

</section>
<section>

نفس باد صبا مشک فشان خواهد شد/عالم پیر دگرباره جوان خواهد شد/ارغوان جام عقیقی به سمن خواهد داد/چشم نرگس به شقایق نگران خواهد شد/این تطاول که کشید از غم هجران بلبل/تا سراپرده گل نعره زنان خواهد شد/گر ز مسجد به خرابات شدم خرده مگیر/مجلس وعظ دراز است و زمان خواهد شد/ای دل ار عشرت امروز به فردا فکنی/مایه نقد بقا را که ضمان خواهد شد/ماه شعبان منه از دست قدح کاین خورشید/از نظر تا شب عید رمضان خواهد شد/گل عزیز است غنیمت شمریدش صحبت/که به باغ آمد از این راه و از آن خواهد شد/مطربا مجلس انس است غزل خوان و سرود/چند گویی که چنین رفت و چنان خواهد شد/حافظ از بهر تو آمد سوی اقلیم وجود/قدمی نه به وداعش که روان خواهد شد

</section>
  • Creative Commons License