css左右布局

最新推荐文章于 2024-09-12 15:53:16 发布

omg_lwf

最新推荐文章于 2024-09-12 15:53:16 发布

阅读量291

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/omg_lwf/article/details/85621354

css 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了使用HTML和CSS进行网页布局的方法，包括如何利用Flexbox实现响应式设计，以及如何处理滚动条和隐藏溢出内容。通过实例展示了左右两栏布局的实现过程。

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

<div class="my-video">
 <div class="l">
    <p>45454</p>
    <p>45454</p>
    <p>45454</p>
    <p>45454</p>
    <p>45454</p>
    <p>45454</p>
   <p>45454</p>
   <p>45454</p>
   <p>45454</p>
</div> 
<div class="r">
 <p>45454</p>
 <p>45454</p>
 <p>45454</p>
 <p>45454</p>
 <p>45454</p>
 <p>45454</p>
  <p>45454</p>
 </div>
</div>

<style>
.my-video {
  display: flex;
  overflow: hidden;
}
.my-video .l {
   flex-basis: 50px;
   width: 50px;
   height: 100vh;
   overflow-y: scroll;
   overflow-x: hidden;
}
.my-video .r {
   flex: 1;
   height: 100vh;
   overflow-y: scroll;
   overflow-x: hidden;
}
</style>