html:

　　<div class="title">
　　　　<div class="line"></div>
　　　　<div class="text">ddd</div>
　　　　<div class="line"></div>
　　</div>

css:

　　.title{width:80%;display:flex;margin:30px auto 24px;}
　　.line{flex:1;border-top:1px solid rgba(255,255,255,0.2);position: relative;top:6px;}
　　.text{padding:0 12px;font-size:14px;}

经典的横线中间文字css布局---flex布局的更多相关文章

  1. CSS的flex布局(转载)

    我们之前已经学过一些布局模型,比如说浮动,绝对定位等等,但是这些布局方式一是不够简洁,而是使用的范围确实是太窄了. flex模型拥有比较多的属性,来设置多样的布局方式,接下来我们就详细介绍各种属性对布 ...

  2. css的flex布局调试

    学习经验-css的flex布局 今天遇到一个小问题 在给三个div布局时,设置父元素display:flex 此时三个div的宽度均为50%,他们并没有超出屏幕的宽度,还是撑满了父元素. 为什么呢? ...

  3. “妄”眼欲穿-CSS之flex布局和边框阴影

    妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. 作为一个什么都不会的小白,为了学习(zb),特别在拿来主义之后写一些对于某些css布局的总结,进一步加深对知识的记忆.知识是人类的共同财 ...

  4. CSS之FLex布局介绍

    网页布局(layout)是CSS的一个重点应用. img 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如, ...

  5. CSS之Flex 布局：语法篇

    网页布局(layout)是 CSS 的一个重点应用. ​ 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如 ...

  6. CSS之Flex 布局

    Flex 布局教程:语法篇 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些 ...

  7. CSS的flex布局和Grid布局

    一.什么是 flex 布局 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这 ...

  8. 微信小程序CSS之Flex布局

    转载:https://blog.csdn.net/u012927188/article/details/83040156 相信刚开始学习开发小程序的初学者一定对界面的布局很困扰,不知道怎么布局,怎么摆 ...

  9. 通过游戏来学习CSS的Flex布局

    在复习Flex 布局的时候发现的了几个有趣的小游戏,在这里分享并记录几个有难度的答案 1. Flexbox Froggy 通过调整CSS样式来使各种青蛙回到对应的荷叶上,游戏默认难度为Beginner ...

随机推荐

  1. exsi主机之间使用scp拷贝文件超时问题

    exsi主机之间使用scp拷贝文件直接连接不上报错超时: 解决: 防火墙勾选ssh选项

  2. ZOJ-3261 Connections in Galaxy War 并查集 离线操作

    题目链接:https://cn.vjudge.net/problem/ZOJ-3261 题意 有n个星星,之间有m条边 现一边询问与x星连通的最大星的编号,一边拆开一些边 思路 一开始是真不会,甚至想 ...

  3. ActiveMQ学习总结（8）——消息队列设计精要

    消息队列已经逐渐成为企业IT系统内部通信的核心手段.它具有低耦合.可靠投递.广播.流量控制.最终一致性等一系列功能,成为异步RPC的主要手段之一. 当今市面上有很多主流的消息中间件,如老牌的Activ ...

  4. 百度IOT

    万物互联 http://www.jianshu.com/p/3d9846bf42bd 百度天工

  5. ArcGIS api for javascript——加入地图并显示x,y坐标

    这个示例报告了用户在地图上悬停和拖拽鼠标的鼠标指针坐标.通过事件监听器来更新鼠标移到的x和y坐标. 下行代码创建了地图: var map = new esri.Map("map") ...

  6. traits的介绍

    traits基本利用了上一篇文章的思想,通过局部特化,来返回针对特定类型的信息. 可以自己实现traits,约定俗成了,返回特性信息. 也可以利用iterator的traits信息. iterator ...

  7. UITableView去掉最后切割线的一种方法

    UITableView以style:UITableViewStylePlain方式创建时.仅仅要有cell,就会有一条黑线 哪怕至于一个cell也会有,如图 在网上找了集中方法,都不好使,比方http ...

  8. 配置CiscoWorks 2000 ANI同步

    配置CiscoWorks 2000 ANI同步       在CiscoWorks 2000的LAN ManagementSolution(LMS)中,Cisco包含了一种ANI的自动发现过程和Res ...

  9. Spatial Pyramid Matching

    转自:http://blog.csdn.net/jwh_bupt/article/details/9625469 SPM 全称是Spatial Pyramid Matching,出现的背景是bag o ...

  10. 安装oracle常见问题分析

    1,之前已经安装过软件,卸载不完全 /tmp/.oracle /tmp/ora* /var/tmp/ora* /etc/ora* 2,安装介质权限或者本身就有问题 3,oracle用户 $/HOME/ ...