昨天做一个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. mmc驱动的读写过程解析

    mmc io的读写从mmc_queue_thread()的获取queue里面的request开始. 先列出调用栈,看下大概的调用顺序, 下面的内容主要阐述这些函数如何工作. host->ops- ...

  2. C++中swap函数

    本文是我用到swap函数时,对其产生好奇,所以结合网上有关博文写下的.个人水平有限,若有错误的地方,欢迎留言指出.谢谢! 一.通用的函数交换模板 template<class T> voi ...

  3. 团队题目需求分析-NABCD

    Need: 由本人亲身体验出发,觉得很多同学记不住老师留的作业,或者上课时间记录了,但是老是忘记到底记录了什么,导致没有半大写作业,所以准备设计一个东西来帮助同学. A: 首先,我最先想到的是手机,所 ...

  4. Difference between Netbios and Host name

    Hostnames or NetBIOS names were used to provide a friendlier means of identifying servers or worksta ...

  5. 51Nod 1095 Anigram单词 | Hash

    Input示例 5 add dad bad cad did 3 add cac dda Output示例 1 0 2 题意:一系列字符串,查询字符串S,能通过其他字符串交换串内字符顺序得到的字符串个数 ...

  6. sqlserver 个人整理

    1.创建临时表(临时表的生命周期是当前回话中) //创建临时表是使用#+表名 //判断临时表是否存在 if object_id('tempdb..#ttt1') is not null Begin d ...

  7. Linux SSH 无密码登录

    1. ssh-keygen -t rsa 2. scp root@ip:/root/.ssh/id_rsa.pub ./id2 3. cat id2 >> authtorized_keys ...

  8. 【BZOJ2815】【ZJOI2012】灾难 [LCA]

    灾难 Time Limit: 10 Sec  Memory Limit: 128 MB[Submit][Status][Discuss] Description 阿米巴是小强的好朋友.  阿米巴和小强 ...

  9. RabbitMq related

    # RabbitMq related Integration of message queuing tools with systems is the usual solution to handle ...

  10. YII 框架查询

    基础查询 Customer::find()->one();    此方法返回一条数据: Customer::find()->all();    此方法返回所有数据: Customer::f ...