昨天做一个css的东西，在开始用js的时候才发现被float占位了

因为float浮动起来了，我清除了浮动，但是还是占位

然后我同事就告诉我其实可以不用float来左右浮动

在父元素上用display:flex完全就可以让子元素左右浮动起来了

而且line-height也可以不用，display:flex里面的align-items:center可以让这个容器处在垂直居中的位置

当然justify-content:center当然就是水平居中了

display:flex代替float的更多相关文章

  1. display:box和display:flex填坑之路

    背景分析:最近做移动端项目时,遇到一个常见的需求: 可以滑动的导航,如下图 虽然是很常见的一个布局,但在移动端没有做过,想当然的写下以下的样式,简单描述下: 父元素 width:100%: overf ...

  2. display:box；display:flex；弹性盒模型

    display:box:display:flex:弹性盒模型 非常适用于移动端.PC端高级浏览器,效果也很好. display: -webkit-box; display: -moz-box; dis ...

  3. css display:flex 属性

    一:display:flex 布局 display:flex 是一种布局方式.它即可以应用于容器中,也可以应用于行内元素.是W3C提出的一种新的方案,可以简便.完整.响应式地实现各种页面布局.目前,它 ...

  4. display:flex布局

    /*背景 居中 自适应 铺满容器*/ background: center / cover; flex布局是什么? flex是Flexibe Box 的缩写,意思为”弹性布局”, 用来为盒子模型提供最 ...

  5. CSS弹性盒布局(display:flex)

    CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...

  6. 1.display:flex布局笔记

    /*display:flex布局方式主要运用于垂直居中的效果*/ 一.Flex译为Flexible Box(弹性盒子),任何一个容器都可以指定为Flex布局 注:设置为Flex布局之后,子元素的flo ...

  7. display:flex 布局教程，弹性布局！

    display:flex 布局教程 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. ...

  8. css中的clear:both,display:flex;

    介绍两者一起讨论的原因: 在明天就国庆的日子里陪着程序员的只有代码,啤酒,还有音乐,然后就是灯光下默默陪伴自己的影子.好了,不矫情了. -------------------------------- ...

  9. CSS——display:flex

    Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 设为Flex布局以后,子元素的float.clear和vertical-align属性 ...

随机推荐

  1. [Leetcode] valid sudoku 有效数独

    Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudoku board could be ...

  2. UVA.10474 Where is the Marble ( 排序 二分查找 )

    UVA.10474 Where is the Marble ( 排序 二分查找 ) 题意分析 大水题一道.排序好找到第一个目标数字的位置,返回其下标即可.暴力可过,强行写了一发BS,发现错误百出.应了 ...

  3. codevs5037 线段树练习4加强版（暴力分块）

    求大爷教线段树怎么写啊QAQ 只会写分块...一开始脑抽写成了O(NKlogN)还被CZL大爷嘲讽了一发T T f[i][j]表示在第i块中,模k为j的数有几个,然后每次修改的时候只需要打个标记,查询 ...

  4. 专题训练之2-sat

    推荐几篇博客:https://blog.csdn.net/JarjingX/article/details/8521690 研究总结2-sat问题 https://blog.csdn.net/wher ...

  5. HDU 1535 SPFA 前向星存图优化

    Invitation Cards Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others ...

  6. Leetcode 002. 两数相加

    1.题目描述 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表 ...

  7. 关于深度学习(deep learning)的常见疑问 --- 谷歌大脑科学家 Caffe缔造者 贾扬清

    问答环节 问:在finetuning的时候,新问题的图像大小不同于pretraining的图像大小,只能缩放到同样的大小吗?" 答:对的:) 问:目前dl在时序序列分析中的进展如何?研究思路 ...

  8. shell 将字符串作为变量名并打印

    使用shell的eval实现此功能.代码如下: #!/bin/sh IP9="127.0.0.1" i=9 eval echo \$IP${i} #!/bin/sh WEBIP0= ...

  9. UVA 1648 Business Center

    https://vjudge.net/problem/UVA-1648 设上升x层,列个方程解出来,再把x带回去 #include<cmath> #include<cstdio> ...

  10. redis常用数据结构解析

    Redis是一个开源的Key-Value存储引擎,它支持string.hash.list.set和sorted set等多种值类型.由于其卓越的性能表现.丰富的数据类型及稳定性,广泛用于各种需要k/v ...