【筆記】學習CSS佈局13——百分比寬度
阿新 • • 發佈：2018-12-01
百分比是一種相對於包含塊的計量單位。它對圖片很有用：如下我們實現了圖片寬度始終是容器寬度的50%。把頁面縮小看下效果！
<!DOCTYPE html> <html> <head> <style type="text/css"> article { border:5px solid #fdc72f; overflow:auto; } article img { float:right; width:50%; } </style> </head> <body> <article class="clearfix"> 你甚至還能同時使用 min-width 和 max-width 來限制圖片的最大或最小寬度！ <img src="ilta.png" /> </article> </body> </html>
你甚至還能同時使用 min-width 和 max-width 來限制圖片的最大或最小寬度！
百分比寬度佈局
你可以用百分比做佈局，但是這需要更多的工作。在下面的例子中，當視窗寬度很窄時 nav 的內容會以一種不太友好的方式被包裹起來。總而言之，選一種最合適你的內容的方式。
<!DOCTYPE html> <html> <head> <style type="text/css"> div { border:4px solid #6ac5ac; } nav { float:left; width:25%; border:4px solid #d64078; } section { margin-left: 25%; border:4px solid #fdc72f; } </style> </head> <body> <div class="container"> <nav> <ul> <li><a href="#">檔案</a></li> <li><a href="#">編輯</a></li> <li><a href="#">選擇</a></li> <li><a href="#">查詢</a></li> <li><a href="#">檢視</a></li> <li><a href="#">工具</a></li> </ul> </nav> <section> 當佈局很窄時， nav 就會被擠扁。更糟糕的是，你不能在 nav 上使用 min-width 來修復這個問題，因為右邊的那列是不會遵守它的。 </section> <section> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. </section> </div> </body> </html>
效果圖如下：
當佈局很窄時， nav 就會被擠扁。更糟糕的是，你不能在 nav 上使用 min-width 來修復這個問題，因為右邊的那列是不會遵守它的。