使用CSS伪元素模拟float:center效果
来源:互联网 发布:国内做云计算的公司 编辑:程序博客网 时间:2024/04/28 12:18
对于这样的布局,你有没有心动过啊?
看起来很合理对不对?尤其当你文章着重于某一主题时,你会特别想把相关的图片放在文章的中心,从而引起读者的注意。
然而要想实现这种布局却并不简单,当前我们可以使用的布局方式都没法创建这种类型的布局。实际上,从某种角度来看,它看起来也没有什么布局可言。我这样的想法是正确的吗?我觉得即使是最顶尖的 CSS 布局系统也无法实现地处理上述布局。这种布局中的文字可以环绕着文字,非常类似 float
浮动效果,唯一的不同在于,文字是四周环绕的效果,那么浏览器中是否有一种 float: center
或者 float: both
方法呢,不幸的是,暂时还没有。
但是实现这种布局是完全可能的,如下面示例所示:
实现这种布局的核心就在于使用伪元素充当占位符:让占位符在文本中浮动,左边一栏右浮动,右边一栏左浮动,同时占位符的高度要等于相应的图片,宽度等于相应图片的一半。大体上,代码结构如下:
/* 假设此处图片为 250px * 250px *#l:before, #r:before { content: ""; width: 125px; height: 250px; }#l:before { float: right; }#r:before { float: left; }
现在,从图中已经可以看到文本之间给图片留出了足够的空间,接下来我们需要做的就是将图片绝对定位到相应位置。或者可以直接将需要环绕的元素放进一个容器中,然后使用负向 margin 将其定位到中间位置,也可以实现类似的效果。
HTML 代码(Jade)结构:
.container img #l #r
CSS 代码样式:
img { position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
原文: http://www.w3cplus.com/css/float-center.html © w3cplus.com 阅读全文
1 0
- 使用CSS伪元素模拟float:center效果
- 用css伪元素实现tooltip效果
- 使用 CSS 伪元素需要注意的
- css 伪元素的初次使用
- 使用 CSS 伪元素需要注意的
- 使用css伪元素的一些遐想
- CSS伪类及伪元素的知识和使用
- CSS 伪类、伪元素、选择器的使用
- css的伪类和伪元素使用示例
- css 伪元素 伪类 使用 万能清除浮动 ..
- CSS 3,用伪元素制作不一样的阴影效果
- css:float浮动元素
- CSS float效果
- css 伪类 伪元素
- css伪类,伪元素
- CSS 伪元素 伪类
- CSS伪类、伪元素
- 第四天:外边距重叠、css背景设置、float浮动、伪元素
- BZOJ 2763 [JLOI2011]飞行路线
- gitlab-runner-maven卡死的情况
- 【Spring】 (5)根据机器环境不同运行不同代码
- 文件上传漏洞(绕过姿势) 转载防丢失
- 简单运算工厂
- 使用CSS伪元素模拟float:center效果
- 跨域
- Hyperledger Fabric SDK 示例fabric-samples-《balance-transfer》之四《安装chaincode》
- 可能是Android最简单的欢迎页面实现
- zabbix通过snmp监控带外管理ping不可用的问题
- 3、认识目标客户:6个角度与2步阶梯
- 创建web项目
- vue2计算属性、方法、及侦听笔记
- Centos下查看占用端口并关闭进程方法