css實現自適應高度的2:5:3垂直布局
本文介紹如何利用css構建一個三部分垂直布局，各部分高度比例為2:5:3，并能適應不同屏幕分辨率。 目標是讓三個子元素填充父容器的整個高度，同時保持比例不變。
我們將使用CSS彈性盒模型（flexbox）實現這一目標。通過設置父元素的display屬性為flex，并將其flex-direction屬性設置為column，可以輕松地將子元素垂直排列。flex-direction: column指定主軸方向為垂直方向，子元素將從上到下排列。
關鍵在于利用flex屬性控制子元素的高度比例。 每個子元素的flex屬性值決定其占據父容器高度的比例。例如，如果三個子元素的flex屬性分別設置為2、5和3，則它們將按照2:5:3的比例分配父容器的高度。
以下代碼展示了如何實現這個布局：
立即學習“前端免費學習筆記（深入）”；
.container { display: flex; flex-direction: column; height: 100vh; /* 占據視口高度 */ /* 可選：垂直居中 */ align-items: center; } .section1 { flex: 2; } .section2 { flex: 5; } .section3 { flex: 3; }
請注意，父元素需要設置height: 100vh;以確保其占據整個視口高度，從而使子元素能夠根據視口高度自適應調整。align-items: center; 使子元素在垂直方向上居中對齊，但這并非必須的。
對應的html結構如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* CSS 代碼同上 */ </style> </head> <body> <div class="container"> <div class="section1"></div> <div class="section2"></div> <div class="section3"></div> </div> </body> </html>
通過以上CSS代碼和HTML結構，即可實現一個自適應不同分辨率的布局，三個子元素始終保持2:5:3的高度比例。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
