04-前端布局三栏实现

  1. 前端三栏布局
    1. 1.实现的效果是左右定宽,中间自适应
    2. 2.float实现
    3. 3.flex

前端三栏布局

1.实现的效果是左右定宽,中间自适应

2.float实现

  • 实现原理
    左右浮动,中间用margin进行分隔
    ```css
  • {
     margin: 0;
     padding: 0;
    }
    .main{
     /* display: flex; */
     height: 100px;
    }
    .left{
     float: left;
     width: 100px;
     height: 100%;
     background-color: red;
    }
    .right{
     float: right;
     height: 100%;
     width: 200px;
     background-color: yellowgreen;
    }
    .center{
     height: 100%;
     width: 100%;
     margin: 0 200px 0 100px;
     background-color: aqua;
    }

3.flex

/* 用flex布局实现 */
.main{
  display: flex;
  height: 100px;
}
.left{
  width: 100px;
  background-color: red;
}
.center{
  flex: 1;
  background-color: yellow;
}
.right{
  width: 100px;
  background-color: blue;
}
  • 在目前看来,用浮动和flex布局是居多的,如果后我发现了新的布局方式,我会第一时间更新到我的博客上,总而言之,言而总之,
    万物皆可flex(老ie😀了)


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 1371769065@qq.com

文章标题:04-前端布局三栏实现

字数:175

本文作者:一叶知秋

发布时间:2020-07-07, 18:47:47

最后更新:2020-07-07, 20:43:46

原始链接:http://yoursite.com/2020/07/07/fontend/04-%E5%89%8D%E7%AB%AF%E5%B8%83%E5%B1%80%E4%B8%89%E6%A0%8F%E5%AE%9E%E7%8E%B0/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

×

喜欢就点赞,疼爱就打赏

相册 github