在2列文本之间浮动图像 [英] Float an image between 2 columns of text

问题描述

我想知道是否可以在CSS / HTML中重现您在这本杂志中看到的效果，其中的图片悬浮在两列文字和文字之间：

我知道只有现代浏览器支持2列布局，所以我的问题是：

1. 这可以在现代浏览器中完成吗？如果是，如何？我们基本上做了一个float：both，但是onc的指令不存在....


2. 在旧版本的浏览器中有没有向后兼容的黑客？ li>
   

最后，如果你可以在HTML / CSS中做到这一点，我会认为图像仍然必须是正方形，不会像在这里一样有机。是否有可能精确地再现效果，而不是让图像与空白的方格，例如，在罗恩·保罗的头的左边和右边？

解决方案

这不容易做到（特别是对于动态文本）。

$ b

这里有一个可能的技巧为浮动中心：

http://css-tricks.com/9048-float-center/

对于 现代浏览器 ，有一个jQuery插件可以精确地：

http://www.jwf.us/projects/jQSlickWrap/ p>

这是一个繁琐的手动版本，启发了上述jQuery插件：

http://www.alistapart.com/articles/sandbags

I'd like to know if it's possible to reproduce in CSS/HTML the effect you see in this magazine, with an image floated between 2 columns of text and the text wrapping around it:

I know only modern browsers support 2-column layouts, so my questions are:

1. Can this be done in modern browsers? If so, how? We are essentially doing a "float:both" but ofc that directive doesn't exist....
2. Is there any backward compatible hack to sort of do it in older browsers?

Finally, if you can do this in HTML/CSS, I would think the image would still have to be square, so that the wrapping effect would not be as organic as it is here. Would it be possible to reproduce the effect exactly, rather than having the image square with whitespace, eg, to the left and right of Ron Paul's head? Would you have to slice up the image to accomplish that?

解决方案

It's not easily doable (especially for dynamic text). All the techniques have various downsides.

Here's one possible technique for "float center":

http://css-tricks.com/9048-float-center/

For modern browsers, there's a jQuery plugin that can do it precisely:

http://www.jwf.us/projects/jQSlickWrap/

Here's the tedious, manual version that inspired the above jQuery plugin:

http://www.alistapart.com/articles/sandbags

这篇关于在2列文本之间浮动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！