Javascript CSS3列和图像

我举个例子

在CSS3生成的列的中心显示图像。我需要图像右侧列中的文本环绕图像，以便它不会出现在图像前面。据我所知，这在当前css中是不可行的

是否有人有一个非突兀的方式来实现我所寻找的

我很想在这里实现这种外观，

当然，左上角没有标题和杂项。其想法是允许在标记中的任何位置添加图像，并使其看起来正确

我现在不关心浏览器支持，所以-任何解决方案都很好

提前谢谢

---

Erik

如果为图像创建一个附加容器并将列跨度宽度设置为中间列的累积宽度，则column span属性可能会有所帮助

您还可以将中间的列放大，并且不需要另一列，这样文本和图像就会很好地对齐，但在这一步中，这是设计方面的考虑

---

您可以定义列的大小来调整图片的大小，而不是定义列的数量。 或者，您可以为每个列定义一个大小，然后在图像上添加css选择器，使它们根据列的宽度自动调整大小

诸如此类 .栏目{ 柱：12em； }

.img列{ 宽度：10em；

---

}如果不进行JavaScript攻击，我不相信有任何纯CSS的方法可以做到这一点。还有column span属性，Opera支持它（目前不在公共构建中），但它只有两个值；完全没有。规范目前不允许您指定列数，这将非常有用。这是我很想看到的东西。

去掉

高度

和

宽度

img属性-它们不是必需的-并使用CSS

最大宽度：100%

有一些向后兼容性问题（特别是IE），但可以通过JS来解决。这种方法是未来的趋势

一篇有参考价值的相关文章：


最好的答案是，
这并不是你问题的确切答案，但至少有可能在一列中用文字环绕图像。在上面的图像（正确的图像）中，有一个css3属性定义了4列，间距为20px。该示例有一个div，它将每列都括起来。包含图像的列（第3列）告诉javascript将最后两列换行，然后在段落元素中添加一个页边空白。如何浮动它？这就是浮子的用途！这就是我一直在寻找的答案。这将是很酷的功能出现在未来的规格。这臭烘烘的，因为我相信他们有他们的“最后一个电话”几个月前。。。我不确定Column span规范说了什么，但我不记得除了“all”和“none”这两个值之外看到了什么。。。如果您看到column span的现代浏览器实现中有任何更改，请确保并让我知道（：据我所知，他们试图不太多地更改columns规范以使其进入Rec，然后将在规范的下一个版本中添加功能。我喜欢您的答案（以及您的blog-heh），但这里的目标是不收缩图像。相反，让内容包装图像。我也喜欢你的回答。然而，这里的目标不是重新调整图像大小，而是让内容包装图像。