使转换后的joomla模板在主要内容中显示2栏

Question

我已经按照以下步骤将html/css模板转换为joomla模板：http://www.tobacamp.com/tutorial/5-easy-steps-converting-html-template-to-joomla-template/。

但是，它并没有说明如何使主要内容显示两列或三列而不是一列(如报纸等)。

我希望我的乔姆拉主页的主要内容，以显示在2或3个columns.IN的主要内容只有文章。

我什么都试过了，都不管用。

我必须输入什么php或css代码才能让我的文章显示在主内容的2-3栏中，而不是一个在另一个的下面。

Answer 1

尽管并非所有浏览器都支持，但您可以(应该)使用CSS Multi Columns来实现此目的。它适用于IE10+，Opera 11.1+ (标准语法)和火狐2+，Chrome 4+，Safari 3.1+ (供应商前缀)。对于其他浏览器，您可以使用JS library。

示例用法

HTML (index.php)

...
<jdoc:include type="message" />
<div id="content">
    <jdoc:include type="component" />        
</div>
...

CSS

#content {
    -webkit-column-count: 3;
    -webkit-column-width: 75px;
    -webkit-column-gap: 20px;
    -webkit-column-rule: 1px solid #fff;
    -moz-column-count: 3;
    -moz-column-width: 75px;
    -moz-column-gap: 20px;
    -moz-column-rule: 1px solid #fff;
    -o-column-count: 3;
    -o-column-width: 75px;
    -o-column-gap: 20px;
    -o-column-rule: 1px solid #fff;
    column-count: 3;
    column-width: 75px;
    column-gap: 20px;
    column-rule: 1px solid #fff;
}