1==》如何让div里面的元素在【垂直 方向】上水平分布
.important-dec{
height: 121px; //必须固定高度
flex-direction: column; //垂直排列
display: flex;
justify-content: space-between;
}

2==》使用 calc() 函数计算 <div> 元素的宽度:
需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
任何长度值都可以使用calc()函数进行计算;
calc()函数支持 "+", "-", "*", "/" 运算;
calc()函数使用标准的数学运算优先级规则;

width: calc(100% - 210px);

div里面的元素在【垂直 方向】上水平分布 使用calc()函数动态计算的更多相关文章

  1. 《在纹线方向上进行平滑滤波,在纹线的垂直方向上进行锐化滤波》 --Gabor增强的具体实践

    <在纹线方向上进行平滑滤波,在纹线的垂直方向上进行锐化滤波>                                          --Gabor增强的具体实践     一.问 ...

  2. HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中

    pc端让一个弹窗水平和垂直方向居中,在知道弹窗宽高的情况下很好计算,只需要用如下css即可: #date{ width: 300px; height: 300px; position: absolut ...

  3. 触发bfc解决父子元素嵌套垂直方向margin塌陷问题

    首先看一下问题案例 .wrapper{             width: 100px;             height: 100px;             background-colo ...

  4. Div 内部所有元素 全部垂直对齐

    http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div How it works: ...

  5. HTML5 移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Html中让输入框input和紧接在后的按钮button在垂直方向上对齐

    <table border="0px" width="360px"> <tr><td colspan="10" ...

  7. div里面的元素垂直均匀分布 按钮引发地址栏出现问号 判断一个数组是否为空 div底部居中 路由传参接受参数

    一个固定高度的div的子元素 在垂直 方向上平均分布 .important-dec{ height: 121px; flex-direction: column; display: flex; jus ...

  8. 行盒(line box)垂直方向的属性详解:从font-size、line-height到vertical-align

    视觉格式化模型 在一个文档中,每个元素都被表示为0.1或多个矩形的盒子.确定这些盒子的尺寸, 属性 --- 像它的颜色,背景,边框方面 --- 和位置是渲染引擎的目标.① 在CSS中,使用标准盒模型描 ...

  9. css 垂直方向 margin 边距 重合

    1:控制两个相邻边盒子之间的距离,在A或者B盒子上用margin控制,就可以控制距离了. 2:父子级之间的元素,常规文档流中,只要垂直外边距直接接触就会发生合并.比如在写header标签时,想移动he ...

随机推荐

  1. 关联mysql失败_Server returns invalid timezone. Go to 'Advanced' tab and set 'serverTimezon'

    关联mysql失败_Server returns invalid timezone. Go to ‘Advanced’ tab and set ‘serverTimezon’ 时区错误,MySQL默认 ...

  2. jumpserver 资产管理及授权

    1.用户管理-添加[用户列表] 1.1点击创建用户 1.2创建用户 2.用户管理-添加[用户组] 2.1点击创建用户组 2.2创建用户组   3.资产管理添加资产 3.1添加节点 3.2添加资产(点击 ...

  3. 初窥R(基本说明、获取帮助、工作空间、输入输出、包)

    本篇简要介绍使用R的一些基本概念,包括基本说明.获取帮助.工作空间.输入输出,每个知识点中都会通过一个例子来练习. 一.R基本情况说明 1.R是一种区分大小写的解释性语言. 2.控制台默认使用命令提示 ...

  4. .Net Core 使用 NPOI 导入Excel

    由于之前在网上查阅一些资料发现总是不能编译通过,不能正常使用,现把能正常使用的代码贴出: /// <summary> /// Excel导入帮助类 /// </summary> ...

  5. C# -- 优先获取电脑C盘之外的磁盘来保存数据

    C# -- 优先获取电脑C盘之外的磁盘来保存数据 1. 优先获取电脑C盘之外的磁盘来保存数据.没有其他盘则使用C盘. public string GetSaveDataDiskPath() { str ...

  6. 易优CMS:compare的基础用法

    [基础用法] 名称:compare 功能:简单的变量比较,复杂的判断条件可以用if标签替换,比较标签是一组标签的集合,基本上用法 都一致. 语法: {eyou:比较标签 name='变量' value ...

  7. seaborn画出的一些好看的图片

    PYSPARK_DRIVER_PYTHON=/home/zhangyu/anaconda3/bin/jupyter-notebook PYSPARK_DRIVER_PYTHON_OPTS=" ...

  8. 剑指offer笔记面试题6----从未到头打印链表

    题目:输入一个链表的头结点,从尾到头反过来打印出每个结点的值.链表节点定义如下: struct ListNode{ int m_nKey; ListNode* m_pNext; } 测试用例: 功能测 ...

  9. HTML+CSS基础知识点简要汇总(思维导图)

  10. packstack-ironic

    安装openstack Pike版本, 其它版本安装方法类似. centos7.6 packstack目前对NetworkManager 还不支持,我们修改下配置: systemctl disable ...