×

CSS基础:两栏布局方式的六大方法

作者:andy0012020.11.02来源:Web前端之家浏览:415评论:0
关键词:htmlcss
微信公众号

微信公众号

了解下前端基础知识:CSS实现两栏布局方式。

HTML

<div class="wrapper">
          <div class="left"></div>
          <div class="right"></div>
</div>

方法一:flex布局

.wrapper{
    display:flex;
}
.left{
    width:200px;
    height:400px;
    background:black;
}
.right{
    flex:1;
    height:400px;
    background:red;
}

方法二:浮动

.left{
    float:left;
    width:200px;
    height:400px;
    background:black;
}
.right{
    background:red;
    height:400px;
}

方法三:BFC

.left{
    width:200px;
    height:400px;
    float:left;
    background:black;
}
.right{
    overflow:hidden;
    height:400px;
    background:red;
}

方法四:position绝对定位

.wrapper{
    position:relative;
}
.left{
    width:200px;
    height:400px;
    background:black;
}
.right{
    position:absolute;
    top:0;
    left:200px;
    right:0;
    bottom:0;
    background:red;
}

方法五:table布局

.wrapper{
    display:table;
    width:100%;
}
.left,.right{
    display:table-cell;
    height:400px
}
.left{
    background:black;
}
.right{
    background:red;
}

方法六:grid布局

.wrapper{
    display:grid;
    width:100%;
    height:400px;
    grid-template-columns:200px auto;
}
.left{
    background:black;
}
.right{
    background:red;
}

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/html20201102.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • Web前端之家

    其实也不奇怪,有些知识用得少的话,时间久了容易被遗忘。...

  • qianduan

    惭愧啊,我只知道console.log,用的最多的就是这个了。...

  • 访客

    是VS不得不...

  • 访客

    这个页面不是很友好啊...

  • vag13

    不错,正好遇到这个问题,感谢分享...

  • 访客

    第三方的闪光点复合弓...

  • Web前端之家

    后续会出vue3.0教程呢,等待~~...

  • qiqndu

    VUE3.0没教程吗,可以出些啊...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2020 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.5 Valyria