使用伪类元素模拟居中浮动float:center

floatcenter

上图合理可行吗?特别是如果你文章需要让猫居中显示而获得人们的关注中心。这样的布局是否能够得到?!

这种布局确实不是很容易去做到。现在的布局方式并没有考虑涉及到这一点,事实上,有时他们觉得自己并不真正具有“网页设计”的初衷。我说的对吗?甚至顶尖的css布局系统,我也不为它们能够把这点处理的很好。这个布局有点像float,文本浮动在图片的周围,但是文本在两个方向浮动,就有点像原本不存在的float:center;和float:both;。

这种布局确实是可行的!

Demo  下载源文件

整体的思路是让浮动的伪类元素占位,让两列文本,一列向左浮动,一列向右浮动。伪类元素应该和图片等高,宽度是图片的一半(记住你需要padding,并且有缝隙去填充)。

css代码:

#l:before, #r:before { content: ""; width: 125px; height: 250px; } #l:before { float: right; } #r:before { float: left; }

[![psuedoplaceholders](http://hiwcc.b0.upaiyun.com/floatcenter_11FBE/psuedoplaceholders_thumb836ec2b2-9f29-4403-800b-5ea230cc974a.jpg "psuedoplaceholders")](http://hiwcc.b0.upaiyun.com/floatcenter_11FBE/psuedoplaceholders27efbca3-446b-49a5-8fab-9038ca0d99de.jpg) 如上图所示,文本中出现的空白可以让我们的图片去填充。可以像demo中那样用绝对定位的方式布局,或者让图片居中,给文本一个负的margin-top,使之环绕。 来自: http://hicc.me/blog/float-center.html  

xiaodao

0

Subscribe to cc log

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus