CSS3列和图像

Question

我这里的例子

在CSS3生成的列的中心显示图像。 我需要图片右边一栏中的文字来环绕图片，以免它出现在图片的前面。 据我了解，这在当前的CSS中是行不通的。

有人能以非破坏性的方式实现我所寻找的吗？

我很想在这里达到这种效果，

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

我目前不在乎浏览器支持，所以-任何解决方案都很棒！

提前致谢....

埃里克

Answer 1

如果不进行JavaScript编程，我不相信有任何纯CSS的方式可以做到这一点。 有一个column-span属性，Opera支持（当前在公共版本中不支持），但是它只有两个值： 一无所有。 该规范当前不允许您指定列数，这将非常有用。 这是我很想看到的东西。

Answer 2

如果您为图像创建一个额外的容器并将column-span width设置为中间列的累积宽度，也许column span属性会有所帮助。

您也可以使中间一栏变大，而无需另外一栏，因此文本和图像将很好地对齐，但是在此步骤中，这是设计考虑因素。

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

Answer 3

除了定义列数之外，您还可以定义其大小以调整图片的大小。 或者，您可以为每列定义大小，然后在图像上添加css选择器，以根据列的宽度自动调整它们的大小。

诸如此类的.column {专栏：12em; }

.column img {width：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

这并不是您所提问题的确切答案，但至少可以在一列内将文字环绕图像。 从此处检查“示例X”。