CSS3列和图像

Question

我的例子是

在CSS3生成的列的中心显示图像。我需要图像右侧列中的文本环绕图像，使其不会出现在图像的前面。这对我的理解在目前的CSS中是不可行的。

有人有一种无害的方式来实现我想要的东西吗？

我想在这里实现这个目标，

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

此时我不关心浏览器支持，所以 - 任何解决方案都很棒！

提前致谢....

埃里克

Answer 1

没有JavaScript破解，我不相信有任何纯粹的CSS方式。有一个列跨区属性，Opera支持（目前不在公共构建中），但它只有两个值;没有，都是。规范目前不允许您指定列数，这将非常有用。这是我很想看的东西。

Answer 2

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

您还可以将中间列放大并删除对另一列的需要，因此文本和图像将很好地对齐，但在此步骤中，它是设计考虑因素。

http://designshack.co.uk/tutorials/introduction-to-css3-part-5-multiple-columns

Answer 3

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

这样的事情 。柱{  列：12em; }

.column img {   宽度：10em; }

Answer 4

淘汰height和width img属性 - 不需要它们 - 并使用CSS max-width:100%;

存在一些向后兼容性问题（尤其是IE），但它们可以用JS插入。这种方法是未来。

一篇有用的相关文章，参考文献：

http://www.ldexterldesign.co.uk/2010/10/99-css-problems-but-liquid-aint-one/

最佳，

Answer 5

这不是您问题的准确答案，但至少可以在一列内的图像周围包装文字。检查here中的“示例X”。