如何用css写边框栏在左边内容页在右边

要使用CSS创建一个边框栏在左边而内容页在右边的布局，你可以使用多种方法，比如浮动（float）布局或者弹性盒子（Flexbox）布局。下面我将给出一个简单的例子使用Flexbox来实现这个布局。

首先，你需要一个容器（比如一个`div`元素），然后在这个容器内，创建两个子元素，一个是边框栏（可以设置为固定宽度），另一个是内容区域。容器使用`display: flex;`来启用弹性盒子布局，并通过`flex-direction: row;`来设置子元素水平排列。

接着，对于边框栏，你可以使用`border`属性来添加边框，并设置`flex`属性来控制其宽度。对于内容区域，你同样可以设置`flex`属性来让它占据剩余空间。

以下是一个简单的CSS和HTML代码示例：

HTML:

<div class="container">
  <div class="sidebar">边框栏内容</div>
  <div class="content">主内容区域</div>
</div>

CSS:

.container {
  display: flex;
}

.sidebar {
  width: 200px; /* 边框栏的固定宽度 */
  border: 1px solid #000; /* 添加边框 */
  padding: 10px; /* 添加内边距 */
}

.content {
  flex: 1; /* 让内容区域占据剩余空间 */
  padding: 10px; /* 添加内边距 */
}

通过上述代码，边框栏将具有固定的宽度，并显示在左边，而内容区域则会自动扩展占据剩余的宽度，并显示在右边。