在页面内div分栏显示

最新推荐文章于 2024-09-16 12:03:21 发布

hellotutu

最新推荐文章于 2024-09-16 12:03:21 发布

阅读量414

点赞数

CC 4.0 BY-SA版权

文章标签： html javascript css

本文链接：https://blog.youkuaiyun.com/hellotutu/article/details/131104459

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在页面内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>