toc

Intro

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

这种布局确实不是很容易去做到。现在的布局方式并没有考虑涉及到这一点，事实上，有时他们觉得自己并不真正具有“网页设计”的初衷。我说的对吗？甚至顶尖的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; }