多列div与图像

我想用一个图像的第一列，使用CSS3属性列计数的一列的宽度的2列div的样式。对于可以处理CSS3的浏览器，它应该是这样的：多列div与图像

img col 
col col 
col col 
col col

然而，对于没有阅读能力，而不是停留在左上角与文本在下一行开始图像的CSS，浏览器，我想把它浮动，就像这样：

img texttextte 
xttexttexttext 
texttetexttext

目前，我有这个有问题的图像，其中规定了我想要的东西对于不能支持CSS3的浏览器：

display: inline; 
float: left; 
-webkit-column-span: in-column; 
-moz-column-span: in-column;

但是对于那些能够支持它的浏览器，它看起来像这样，与图像占用了所有列本身：

img col col 
    col col 
    col col 
    col col

...这不是我想要的。如何让图像浮动，有无列？

编辑：

下面是HTML：

<div id="content"> 
    <h2>Title here</h2> 
    <img src="/static/images/img01.jpg" width="200" height="152" /> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nam porttitor urna sit amet est pulvinar congue. Integer 
    lacinia dictum enim, non molestie turpis volutpat et. Praesent 
    pretium accumsan sapien, porttitor rhoncus augue porta ac. 
    Quisque fermentum enim quis magna condimentum a lobortis urna 
    accumsan. Integer viverra tristique turpis, sed fermentum 
    lorem hendrerit vitae.</p> 
</div>

这是迄今未-相当工作的CSS：

#content { 
    width: 600px; 
    -moz-column-count: 2; 
    -webkit-column-count: 2; 
    -moz-column-gap: 18px; 
    -webkit-column-gap: 18px; 
} 
#content img { 
    display: inline; 
    float: left; 
    -webkit-column-span: in-column; 
    -moz-column-span: in-column; 
}

我觉得自己像一个漂浮的，内联图像在列中不应该如此。

来源

2011-08-30 katherine

你能发布你的HTML吗？ – jim31415

您的'列跨度'声明[显示为无效]（http://www.w3.org/TR/css3-multicol/#column-span）或[非标准]（http：// kmsm。 CA/2010/AN-几乎完全引导至CSS3的多列布局/）。 –

@ jim31415发表。 – katherine

你可以试试这个...

<img src="/static/images/img01.jpg" width="200" height="152" style="float: left;"/>

...作为一个内嵌式的（更好的是在外部样式表类），或者使用好老align属性...

<img align="left" src="/static/images/img01.jpg" width="200" height="152" />

...我希望这有助于。

来源

2011-08-31 14:49:34 user466764

您可以将图像放在p标签中。您预留的列和图像的大小，以便您很好。我已经完成了这个没有问题，你唯一不能做的就是让图像跨越多列。

来源

2011-09-15 03:31:31 Tyus

多列div与图像

回答

相关问题