昨天做一个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. HDOJ(HDU).1003 Max Sum (DP)

    HDOJ(HDU).1003 Max Sum (DP) 点我挑战题目 算法学习-–动态规划初探 题意分析 给出一段数字序列,求出最大连续子段和.典型的动态规划问题. 用数组a表示存储的数字序列,sum ...

  2. HDOJ.1075 What Are You Talking About（map）

    What Are You Talking About 点我跳转到题面 点我一起学习STL-MAP 题意分析 首先第一组START-END给出翻译的字典,第二组START-END给出一句话,查找里面出现 ...

  3. JSP页面中的Meta标签详解

    Meta标签详解 相信大家在平时开发中最常接触的页面就是html和jsp了,可在这两个页面中有一个Meta标签你天天都会看见,可是你真的了解这个标签的一些其他用处吗?今天给大家介绍一些该标签的其他应用 ...

  4. Android Json解析与总结

    一.JSON定义 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. 它基于JavaScript Progra ...

  5. Spring源码解析-JdbcTemplate

    JdbcTemplate类图 从类继承关系上来看,JdbcTemplate继承了基类JdbcAccessor和接口类JdbcOperation,在基类JdbcAccessor的设计中,对DataSou ...

  6. sql中按in中的ID进行排序输出

    builder.OrderBy("charindex(','+convert(varchar,ID)+',',',"+chufenOrder+"') ");

  7. STL之五：set/multiset用法详解

    集合 转载于:http://blog.csdn.net/longshengguoji/article/details/8546286 使用set或multiset之前,必须加入头文件<set&g ...

  8. JS把内容动态插入到DIV

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...

  9. svn: Checksum mismatch while updating 错误

    最近使用svn客户端更新代码的时候出现 Checksum mismatch while updating 的错误 解决办法 在出错文件的目录下,用update to reversion , 先选onl ...

  10. Enterprise Architect 13 : 需求建模 自动命名并计数

    如何给模型中的需求元素配置计数器以自动设置新创建元素的名称和别名: Configure -> Settings -> Auto Names and Counters 设置好后的效果图: