Question

我有一个大文字。我使用以下CSS制作了3列：

.columns {
-webkit-column-count: 3;
text-align: justify;
}

它必须在Safari中工作。这很好用。但现在我想将图像放在第二列的顶部我怎么能得到这个结果？

编辑：这是我做这件事的开始，但我想说重要的是以任何方式得到结果，所以我可以放弃这个CSS以防万一它可以在没有这个的情况下解决。

编辑2：我用jquery colonizer插件解决了它。我不得不在插件中添加3-5行代码。我需要这个用于iPad，我在那里安排了我之前提到的文字和图像。我认为这是完成这项工作的最简单方法。

如果您需要解决方案，请随时给我发电子邮件。

@flynfish，请将其作为答案发布，以便我接受。

Answer 1

我不确定这是可能的。浏览器确定在哪里打破内容，并且无法通过CSS在这些点插入内容。我能够提出的最接近的事情是使用column-break-before：property（-webkit-column-break-before，-moz-column-break-before，column-break-before）。

例如：

<强> CSS ：

div#multicolumnElement {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}
.special {
    -webkit-column-break-before:always;
    -moz-column-break-before:always;
    column-break-before:always;
}

<强> HTML ：

<div id="multicolumnElement">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis, lectus 
nec tempor auctor, urna urna venenatis nisi, ac pellentesque est felis egestas lorem! 
Duis lectus dui, commodo in varius sed, bibendum at eros. Donec ultricies, est quis 
pretium porttitor, neque arcu auctor dui, sit amet adipiscing erat est id massa. 
Morbi at elementum <img class="special" src="http://dummyimage.com/200x150/000/fff" />lectus. Donec fermentum massa sit amet nisi tempus sed vestibulum 
tortor pellentesque. Aliquam dictum, sapien a luctus ultricies, ipsum erat dignissim 
tellus, in ultricies mi lorem tempor velit. Vivamus ornare nulla sed arcu elementum 
pharetra. </p>
<p>Phasellus cursus felis sed felis porta tempor. Vestibulum at eleifend ligula. 
Vestibulum hendrerit ligula at elit lacinia at ultricies metus fringilla! Vestibulum 
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi 
ultrices tortor vel ipsum imperdiet imperdiet. Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi 
eu leo quis lectus aliquet elementum. Aenean porta interdum nibh id posuere? Phasellus 
nisl lorem, semper bibendum semper at, malesuada non odio. </p>
<p>In ullamcorper eros quis nisi pharetra tincidunt. Vestibulum ac elit nunc, sed 
laoreet leo! Duis et nulla sit amet lorem gravida lacinia. Cras massa ipsum, semper 
in mattis ut, fringilla in nisi. Nulla mauris urna, feugiat sed convallis id, facilisis 
et sem. Donec egestas ultricies commodo. Aliquam eget nulla enim, et dictum nisi. 
In faucibus, leo vitae congue convallis, elit eros venenatis leo, nec lobortis sapien 
orci at nunc. </p>
</div>

这会产生四列文字，图像位于第二列的顶部，但是根据文本的数量和可用空间的不同，可能并不总是如你所愿。

我已经链接到一个jsFiddle示例，但它似乎是在ATM上。

CSS和javascript文本和图像定位

1 个答案: