CSS三栏式布局

最新推荐文章于 2025-08-08 09:39:17 发布

JAVA小镇V

最新推荐文章于 2025-08-08 09:39:17 发布

阅读量335

点赞数

CC 4.0 BY-SA版权

文章标签：布局 css

本文链接：https://blog.youkuaiyun.com/lin74love/article/details/62883010

前端专栏收录该内容

19 篇文章

订阅专栏

本文介绍了两种实现三栏式布局的方法：一种使用position:absolute，另一种使用float。通过实际代码展示了如何设置各部分的位置和间距，并指出每种方法的特点及注意事项。

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

三栏式布局

以下两种方式分别用float和position:absolute 实现，中间的自适应宽度都是用margin实现的，事实证明margin真的很方便！

方法1(position)：

.container{
    background-color: #eee;
    position:relative;
    overflow: auto;
}
.left,.right{
    position: absolute;
    top:20px;
}
.left{
    width:200px;
    left:20px;
}
.content{
   margin:0px 160px 0px 240px;
}
.right{
   right:20px;
   width:120px;
}

//这种方式存在的一个问题：container的高度是由content决定的，如果溢出，会出现滚动条。
                      这是因为最高的元素right设置了absolute定位。

方法二（float):

.container{
    background-color: #eee;
    position:relative;
    overflow: auto;
}
.left,.right{
    position: absolute;
    top:20px;
}
.left{
    width:200px;
    left:20px;
}
.content{
   margin:0px 160px 0px 240px;
}
.right{
   right:20px;
   width:120px;
}


//这种方式完全符合要求。但是有一点需要注意，html文件中right标签要写在content标签前面。如下：

 <body>
   <div class="container">
    <div class="left">
      <img src="images/eg_venus.gif" />
       <span>coding </span>
      </div>
      <div class="right">
       <img src="images/eg_merglobe.gif" />
       <img src="images/eg_planets.jpg" />
       <img src="images/eg_sun.gif" />
       <img src="images/eg_merglobe.gif" />
       <img src="images/yujinxiang.jpg" />
      </div>
       <div class="content">
       <p>我的团队</p>
       <p>我申请了好几个团队，目前还没有审核</p>
       <p>我申请了好几个团队，目前还没有审核</p>
       <p>我申请了好几个团队，目前还没有审核</p>
       <p>我申请了好几个团队，目前还没有审核</p>
       <p>我申请了好几个团队，目前还没有审核</p>
      </div>
    </div>
  </body>