【发布时间】:2013-03-14 17:54:35
【问题描述】:
我正在尝试让我的文字在我的不倒翁博客上有两列。我做了一个类:
<style>
.2col
{
width: 800px;
margin: 0 auto;
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
text-align: justify;
height: 300px;
}
</style>
这在我做的一个小测试中有效:
<div class="2col">
Bunch of text
</div>
你可以看到here
但是当我尝试在我的博客中将其应用于文本时,它不起作用。如果我将它应用于整个博客,它会起作用,但我只想将它应用于某些文本部分。在 tumblr 中,我正在使用:
<div class="2col">
{Body}
</div>
但是它不会更改文本,您可以在我的博客主页上看到 here(lorem ipsum 文本)。 {Body} 部分似乎没有任何会导致问题的内容(您可以在页面源代码中看到 CSS 和文本。我觉得我缺少对 CSS 类的一些基本了解,因为我还没有甚至成功地尝试在文本中添加一些简单的东西,比如下划线。我希望有人能指出我正确的方向。
作为参考,我在我的博客上发布了我正在尝试制作的图片,但我没有足够的声誉将其添加到此处。
【问题讨论】:
-
因为您所有的 css 列标签都是浏览器前缀,例如。
-moz-column...和-wekkit-column...。您将 Opera 排除在外。您可能还想添加column-...;) -
我已添加到
.2col div p: column-count: 2;,它在您的博客上运行良好。 -
似乎它相当依赖于解释器。我通过将其重命名为“a2col”来修复它(在 safari 上)。既然它对我有用,我会让它像预期的那样更加通用。至于 IE
标签: css tumblr column-count