css布局

两栏布局

左侧定宽，右侧自适应

.left {

    width: 200px;

    height: 600px;

    background: red;

    float: left;

    text-align: center;

    line-height: 600px;

    color: #fff;

}

.right {

    margin-left: 210px;

    height: 600px;

    background: yellow;

    text-align: center;

    line-height: 600px;

}


三栏布局

第一种 浮动

当宽度小于左右宽度之和时右侧栏会掉下去


效果

第二种 flex


不限定middle高度会随着right的高度走
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS 布局说——可能是最全的
    前言 现在，我们被称为前端工程师。然而，早年给我们的称呼却是页面仔。或许是职责越来越大，整体的前端井喷式的发展，使...
    Calvin李阅读 519评论 0赞 0
  • CSS布局小结
    前言 因为要在团队内作一次技术分享，想了几个题目，最后还是决定系统总结一下我在CSS布局这方面的知识。一是这个题目...
    Samhanx阅读 652评论 0赞 6
  • 常见 CSS 布局方式
    前言 温馨提示：本文较长，图片较多，本来是想写一篇 CSS 布局方式的，但是奈何 CSS 布局方式种类太多并且实现...
    sunshine小小倩阅读 3,193评论 0赞 59
  • 9. CSS布局
    常见布局（PC） 固定宽度布局——缺点：屏幕尺寸不够时会出现滚动条。 弹性布局（布局随浏览器变化）——缺点：代码复...
    Joey的企鹅阅读 288评论 0赞 1
  • vguh
    ugpuviyfyc
    5173dfa6933e阅读 431评论 0赞 0