一个简单的双栏框架基础架构，虽然简单但是对我们这些小白来说值得加入在笔记当中，已备后续主题开发所用

1. 我们以需要新建一个外部框架例如

<div class="main"></div>

2. 对这个外部框架css样式进行设置，我们假设这个外部框架占据的页面宽度是100即占满屏幕的宽度

.main{
position: relative;
display: flex;
min-height: 100vh;
}

3. 在内部新建两个左右栏目的框架 div 并对 div 的css 样式进行设置 例如

// 左边
.left {
//首先我们确定这个左边框架的大小例如占屏幕的百分之30
width: 30%;
//高度我们设置为占满屏幕高度
height:100%;
//如果碰到我们左边栏目列表很多我们就加上一个滚动轴，让这个div内的列表也可以滚动起来
overflow-x: auto;
}
// 我们刚刚设置了左边，现在我么开始设置右边的框架css样式
.right{
//相同的理论，我们刚刚左边设置了宽度为屏幕的百分之30 那么我们右边就只能设置为宽度百分之70
width: 70%;
//高度也是相通的理论 假设设置为100
height:100%;
//设置了高度以后列表内容碰到超出部分的时候设置滚动轴
overflow-x: auto;
}