Question

我正在尝试使用CSS3属性column-count在第一列中使用图像宽度为一列的2-col div。对于可以处理CSS3的浏览器，它应该如下所示：

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;
}

我觉得浮动的内嵌图像不应该在列中表现那样。

Answer 1

你可以试试这个......

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

...作为内联样式（更好地作为外部样式表中的类）或者具有良好的旧对齐属性...

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

......我希望这会有所帮助。

Answer 2

您可以将图像放在p标签中。您预设的列和图像的大小，这样您就可以了。我这样做没问题，你唯一不能做的就是让图像跨越多列。

带图像的多列div

2 个答案: