时间戳

首页 > 解决方案 > 使边栏以最大宽度逐渐减小

html - 使边栏以最大宽度逐渐减小

问题描述

如何通过逐渐减小整个页面的宽度来使网页的侧面部分减小它们的宽度？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 10% 80% 10%;
            min-height: 100vh;
        }
        .side-right {
            background: red;
        }
        .side-left {
            background: blue;
        }
        .main {
            background: green;
        }
        @media screen and (max-width: 1000px) {
            .container {
                grid-template-columns: 0 100% 0;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="side-right">
    </div>
    <div class="main">
    </div>
    <div class="side-left">
    </div>
</div>
</body>
</html>

在下面的示例中，在 max-width = 1000px 之后，侧面元素会立即消失，但我想让它们减小它们的宽度，以响应在 max-width 上更改的每个像素。怎么做？

标签： htmlcssflexboxcss-grid

解决方案

flex-box您可以通过更改一些 css 来为所有内容设置动画。

.container {
  display: flex;
  min-height: 100vh;
  flex-direction: row-reverse;
}
.side-right {
  background: red;
  width: 100%;
}
.side-left {
  background: blue;
  width: 100%;
}
.main {
  background: green;
  min-width: 600px;
}

那只是一个基本的例子。考虑阅读更多关于 flex-box 的内容。

推荐阅读