两栏、三栏布局的几种简单实现

最新推荐文章于 2022-04-06 14:52:32 发布

꧁薇博꧂

最新推荐文章于 2022-04-06 14:52:32 发布

阅读量209

点赞数 1

本文链接：https://blog.csdn.net/PJW_WYB/article/details/108270496

版权

总结：

两栏布局（两列自适应、一列固定一列自适应）、三栏布局（两边固定中间自适应）

一、两栏布局

1、两列自适应

两列自适应是特别简单的布局方式，其要点在于把列宽用百分百来表示，然后可以使用 float 或 display：inline-block 等方法来让两列处于同一行
　　
方法一：使用 float

<style>
  .outer{
    background:green;
    padding-bottom:20px;
  }
  .left{
    float:left;
    width:20%;
    height:100px;
    background:red;
  }
  .right{
    float:right;
    width:77%;　　　　　　//使两列之间有一个间距
    height:100px;
    background:pink;
  }
</style>
 
<body>
  <div class="outer">
    <div class="left">列一</div>
    <div class="right">列二</div>
  </div>

优点：简单

缺点：两列都脱离了文档流，两列后面的内容或父盒子无法被撑起（上图中的绿色是父盒子），故需要清除浮动。
方法二：使用 display：inline-block

<style>
  .outer{
    background:green;
    padding-bottom:20px;
  }
  .left{
    display:inline-block;
    width:20%;
    height:100px;
    background:red;
  }
  .right{
    display:inline-block;
    width:60%;          //设置小方便观察
    height:120px;
    background:pink;
  }
</style>

<body>
  <div class="outer">
    <div class="left">列一</div>　　　　//这儿换行了，"列一" 和 "列二" 之间因换行形成了一个间隙
    <div class="right">列二</div>
  </div>
</body>

优点：不用考虑盒子脱离文档流的问题，父盒子总能被高的盒子撑起

缺点：需要考虑盒子的间距。

2、一列固定一列自适应

方法一：margin

<style>
  .outer{
    margin-left:220px;    //可以考虑margin-right：-220px；但需要和float联合使用
  }
  .left{
    float:left;
    width:200px;
    height:100px;
    background:red;
  }
  .right{
    height:120px;
    background:pink;
  }
</style>

<body>
  <div class="left">列一</div>
  <div class="outer">
    <div class="right">列二</div>
  </div>
</body>

缺点：无论是设置margin-left，还是设置margin-right，“列一” 和 “列二” 至少有一个是脱离文档流了的
方法二：BFC

<style>
  .left{
    float:left;
    margin-right:20px;
    width:200px;
    height:100px;
    background:red;
  }
  .right{
    overflow:hidden;        //触发BFC
    height:120px;
    background:pink;
  }
</style>

<body>
  <div class="left">列一</div>
  <div class="right">列二</div>
</body>

触发 BFC 后盒子不会与 float 区域重叠

二、三栏布局

1、两边固定中间自适应

方法一：margin

<style>
  .outer{
    width:100%;
    float:left;
  }
  .center{
    height:100px;
    margin:0 60px;
    background:pink;
  }
  .left,
  .right{
    float:left;
    width:50px;
    height:100px;
    background:red;
  }
  .left{
    margin-left: -100%;
  }
  .right{
    margin-left: -50px;
  }
</style>

<body>
  <div class="outer">
    <div class="center">列二</div>
  </div>
  <div class="left">列一</div>
  <div class="right">列三</div>
</body>

缺点：方法比较麻烦，需要嵌套额外的盒子，需要清除浮动

要点：注意三者在 HTML 中的顺序。
方法二：position

<style>
  body{
    margin:0;
  }
  .center{
    height:100px;
    margin:0 60px;
    background:pink;
  }
  .left,
  .right{
    position:absolute;
    top:0;
    width:50px;
    height:100px;
    background:red;
  }
  .left{
    left:0;
  }
  .right{
    right:0;
  }
</style>

<body>
  <div class="left">列一</div>
  <div class="center">列二</div>
  <div class="right">列三</div>
</body>

中间盒子的 margin 配合两边盒子的绝对定位。

方法三：BFC

<style>
  .center{
    overflow:hidden;
    height:120px;
    background:pink;
  }
  .left,
  .right{
    width:50px;
    height:100px;
    background:red;
    margin:0 10px;
  }
  .left{
    float:left;
  }
  .right{
    float:right;
  }
</style>

<body>
  <div class="left">列一</div>
  <div class="right">列三</div>
  <div class="center">列二</div>
</body>

要点：注意 “列一”、“列二”、“列三” 在 HTML 中的顺序。

꧁薇博꧂

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两栏、三栏布局的几种简单实现

总结：两栏布局（两列自适应、一列固定一列自适应）、三栏布局（两边固定中间自适应）一、两栏布局1、两列自适应两列自适应是特别简单的布局方式，其要点在于把列宽用百分百来表示，然后可以使用 float 或 display：inline-block 等方法来让两列处于同一行　　方法一：使用 float<style> .outer{ background:green; padding-bottom:20px; } .left{ float:left;
复制链接

扫一扫