zoukankan      html  css  js  c++  java
  • 左侧宽度固定,右侧充满剩余空间,有哪些实现方式?

    方法一:flex布局,左侧flex-grow: 0, flex-shrink: 0,flex-basis: 固定宽度数值;右侧flex-grow: 1, flex-shrink: 1,flex-basis: 0px(或者不设置);

    方法二:float+margin, 左侧元素float:left;给一个固定宽度,右侧元素margin-left: 左侧元素的宽度;

    方法三:float+float,左侧元素float:left;给一个固定宽度,右侧元素float:right;宽度设为calc(100% - 左侧元素的宽度);

    方法四:父级元素的display: table, 左侧元素display:table-cell且给一个固定宽度,右侧元素display: table-cell,不设置宽度即可;

    方法五:absolute+margin, 左侧元素设置一个绝对定位定位在左侧且给一个固定宽度, 右侧元素,充满空间且给一个margin-left为左侧元素的宽度;

    常用的是上面这五种,还有其他的实现方式,欢迎大家留言交流。

  • 相关阅读:
    Redis Pipeline原理分析
    python 装饰器,传递类以及参数
    q
    Redis的EXPIRE过期机制介绍
    z
    julia .文档
    julia 安装
    python 弧度与角度互转
    python 角度和弧度转化
    机器人行业中我们常说的roll、yaw、pitch是什么?
  • 原文地址:https://www.cnblogs.com/zhizhi0810/p/15187018.html
Copyright © 2011-2022 走看看