如何解决无法使用PureCss将列放在列中
希望代码是不言自明的。 我正在使用Pure Css框架尝试使页面响应。 试图在pure-g class div中具有左右区域。 左边应该有2个div。我缺乏命名思想,所以叫“左派”和“右派”。
我已阅读以下官方网站:
还发现:
https://www.tutorialspoint.com/purecss/purecss_grids.htm
我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/base-min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/grids-min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/grids-responsive-min.css">
<style>
.content {
/* position: absolute; */
width: 100%;
height: 100%;
background-color: red;
overflow-y: auto;
}
.left {
/* position: relative; */
height: 100%;
background-color: blue;
}
.right {
/* position: relative; */
height: 100%;
background-color: aqua;
}
.lefty {
/* position: relative; */
height: 12em;
background-color: darkorange;
}
.righty {
/* position: relative; */
height: 12em;
background-color: darkslategray;
}
</style>
</head>
<body>
<div class="content pure-g">
<div class="left pure-u-1 pure-u-lg-1-3">
</div>
<div class="right pure-u-1 pure-u-lg-2-3">
<!-- <div class="pure-u-1"> -->
<div class="pure-g">
<div class="lefty pure-u-1 pure-u-lg-1-2"></div>
<div class="righty pure-u-1 pure-u-lg-1-2"></div>
</div>
<!-- </div> -->
</div>
</div>
</body>
</html>
文档说每个网格(pure-g)只能由单位(pure-u- )填充,但是查看文档页面的源代码以及其他页面,它们似乎都通过包围来解决纯u-中的内部纯g。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。