如何用CSS实现2:5:3比例的垂直布局并适配不同分辨率？-html教程-PHP中文网

如何用CSS实现2:5:3比例的垂直布局并适配不同分辨率？

聖光之護

发布： 2025-03-18 09:20:16

原创

378人浏览过

如何用CSS实现2:5:3比例的垂直布局并适配不同分辨率？

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的高度比例。

以上就是如何用CSS实现2:5:3比例的垂直布局并适配不同分辨率？的详细内容，更多请关注php中文网其它相关文章！