zoukankan      html  css  js  c++  java
  • css实现三列布局

    1.  使用float实现三列左右固定宽高,中间自适应宽度

    <section class="wrapper">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
    </section>
    <style>
    .wrapper div { height: 300px; }
    .left { float: left; 100px; background: red; }
    .center { background: blue; margin-left: 100px; margin-right: 100px; }
    .right { float: right; 100px; background: yellow; }
    </style>
    注意: 这里的right元素右浮动,center没有浮动,应该把右浮动的元素写在center前面才能实现三列效果,否则右浮动的元素会被挤向下一行;

    2. 使用opsition实现

    <section class="wrapper">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
    </section>
    <style>
    .wrapper { position: relative; }
    .wrapper div { height: 300px; }
    .left { position: absolute; top: 0; left: 0; 100px; background: red; }
    .center { position: absolute; top: 0; left: 100px; right: 100px; background: blue; }
    .right { position: absolute; top: 0; right:0; 100px; background: yellow; }
    </style>
    注意: 这里的center一定要设置left和right,才能让中间内容区被撑开

    3.flex布局实现

    <style>
    .wrapper { display: flex }
    .wrapper div { height: 300px; }
    .left { 100px; background: red; }
    .center { background: blue; flex: 1;}
    .right { 100px; background: yellow;}
    </style>
    注意: 这里的center要设置flex: 1;实现中间宽度自适应

    4. table布局

    <style>
    .wrapper { display: table; 100%;}
    .wrapper div { display: table-cell; height: 300px; }
    .left { 100px; background: red; }
    .center { background: blue;}
    .right { 100px; background: yellow;}
    </style>
    注意:要给父元素设置宽度百分百

    5.双飞翼,利用margin负值实现

    <body>
    <section class="wrapper">
    <div class="center"></div>
    </section>
    <div class="left"></div>
    <div class="right"></div>
    </body>
    <style>
    .wrapper { 100%; height: 100px; background-color: #fff; float: left; }
    .wrapper .center { margin: 0 210px; height: 100px; background-color: #ffe6b8; }
    .left { float: left; 200px; height: 100px; background-color: darkorange; margin-left: -100%; }
    .right { float: left; 200px; height: 100px; background-color: darkorange; margin-left: -200px; }
    </style>
    注意:要在center外层包一个父元素,并给这个父元素设置float开启BFC,并且center部分代码要放在最前面,左右的无所谓
    参考链接: https://blog.csdn.net/cinderella_hou/article/details/52156333
          https://blog.csdn.net/weixin_40485972/article/details/78161022?utm_source=blogxgwz0
  • 相关阅读:
    配置Robot Framework 环境时如何查看wxPython是否成功安装
    win10系统同时安装python2.7和python3.6
    Python 统计不同url svn代码变更数
    JavaWeb之 Servlet执行过程 与 生命周期
    JavaWeb之Servlet:请求 与 响应
    webservice(基础)
    通过反射,给对象之间赋值
    用反射获取类中的属性值
    tree树形
    破解weblogic(数据库)密码
  • 原文地址:https://www.cnblogs.com/fairy62/p/9811624.html
Copyright © 2011-2022 走看看