两列布局

最新推荐文章于 2024-10-27 06:30:00 发布

前端独秀

最新推荐文章于 2024-10-27 06:30:00 发布

阅读量325

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：布局

原文链接：https://www.mk2048.com/blog/blog.php?id=b1b2kci2j&title=%E4%B8%A4%E5%88%97%E5%B8%83%E5%B1%80

前端专栏收录该内容

493 篇文章

订阅专栏

本文介绍了三种实现网页两列布局的方法，包括使用margin和float、利用calc()动态计算宽度以及通过float和overflow结合margin进行布局。这些技巧适用于创建左边固定、右边自适应的布局设计。

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

很多网站都使用了两列布局，就是左边固定，右边自适应的布局。两列布局有多种方法，现在来列举一下

第一种：margin float / margin absolute

将左边设置 float 或者 absolute ，使其脱离文档流，右边使用margin-left设置左右间隔，大小一般为＞= 左边的宽度，因为是块级元素，所以右边可以充满剩余的屏幕，这样就实现了左边固定，右边自适应的效果。

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>twoList layout</title>
    <style type="text/css">
        .left{
          /*float:left;*/
          position:absolute;
          width:200px;
          height:30px;
          background-color:red;
        }
        .right{
          height:30px;
          background-color:blue;
          margin-left:220px;
        }
    </style>
</head>
<body>
   <div class="left"></div>
   <div class="right"></div>
</body>
</html>

View Code

效果如下：

第二种：float margin calc()

将左右都设置向左浮动，左边使用margin-right来设置左右间隔，右边的宽度设置为calc(100% - (left-width margin-right))

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>twoList layout</title>
    <style type="text/css">
        .left{
          float:left;
          width:200px;
          height:30px;
          background-color:red;
          margin-right:20px;
        }
        .right{
          float:left;
          height:30px;
          background-color:blue;
          width:calc(100% - 220px);
        }
    </style>
</head>
<body>
   <div class="left"></div>
   <div class="right"></div>
</body>
</html>

View Code

第三种：float overflow margin

左边设置float，右边清除浮动就可以显示两列布局了, 使用margin来设置左右间隔，可以在左边设置margin-right来设置左右间隔，也可以在右边设置margin-left来设置左右间隔，值得注意的是若是右边使用margin-left来设置间隔时，需要算上左边的宽度

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>twoList layout</title>
    <style type="text/css">
        .left{
          float:left;
          width:200px;
          height:30px;
          background-color:red;
          /*margin-right:20px;*/
        }
        .right{
          height:30px;
          background-color:yellow;
          overflow:hidden;
          margin-left:220px;
        }
    </style>
</head>
<body>
   <div class="left"></div>
   <div class="right"></div>
</body>
</html>

View Code