在页面内div分栏显示

原创于 2023-06-08 11:40:02 发布 · 438 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #css

该文章展示了如何使用CSS样式实现页面内的左右两栏布局，其中.left栏固定宽度并有滚动条，.right栏通过margin-left与.left对齐，同样具有滚动条。整个布局在.main_class容器中，保持高度固定并隐藏超出内容。

在页面内div分栏显示

样式：

<style>
  .left {
    float: left;
    width: 320px;
    height: 100%;
    overflow: scroll; // 滑块
  }
  .right {
    margin-left: 350px;
    height: 100%;
    overflow: scroll;// 滑块
  }
  .main_class {
    height: 960px; // 主页面高度
    overflow: hidden; 
  }
</style>

页面显示

<body class="stackedit" >
  <div class="main_class">
  <div class="left">
    <div class="toc">居左代码块</div>
</div>
<div  class="right">具有代码块</div>
 <div>
</body>