Genesis Framework: 如何使用Content Column Classes

最后更新于 2012 年 11 月 20 日

很多收费主题都自带排版功能，有的将排版功能做成shortcode，有的就需要你直接在source code模式按照主题指定的样式写。Genesis Framework给我们提供了一个排版功能叫做Content Column Classes（分栏显示）。看看例子就明白了。

我想让文章内容分两栏显示，编辑文章时这样写

<div class="one-half first">这是WordPress的文章分栏显示实例，你可以编辑这些文字修改为自己的内容，分栏显示让文章结构更加清晰美观，不需要修改模板源文件，非常方便</div>
<div class="one-half">这是WordPress的文章分栏显示实例，你可以编辑这些文字修改为自己的内容，分栏显示让文章结构更加清晰美观，不需要修改模板源文件，非常方便</div>
</div>

注意div上的class，one-half表示分两栏，first表示第一个栏目，效果如下图所示

分栏显示代码汇总

分两栏

<div class="one-half first">这是WordPress的文章分栏显示实例</div>
<div class="one-half">这是WordPress的文章分栏显示实例</div>

分三栏

<div class="one-third  first">这是WordPress的文章分栏显示实例</div>
<div class="one-third">这是WordPress的文章分栏显示实例</div>
<div class="one-third">这是WordPress的文章分栏显示实例</div>

分四栏

<div class="one-fourth  first">这是WordPress的文章分栏显示实例</div>
<div class="one-fourth">这是WordPress的文章分栏显示实例</div>
<div class="one-fourth">这是WordPress的文章分栏显示实例</div>
<div class="one-fourth">这是WordPress的文章分栏显示实例</div>

分五栏

<div class="one-fifth  first">这是WordPress的文章分栏显示实例</div>
<div class="one-fifth">这是WordPress的文章分栏显示实例</div>
<div class="one-fifth">这是WordPress的文章分栏显示实例</div>
<div class="one-fifth">这是WordPress的文章分栏显示实例</div>
<div class="one-fifth">这是WordPress的文章分栏显示实例</div>

分六栏

<div class="one-sixth first">这是WordPress的文章分栏显示实例</div>
<div class="one-sixth">这是WordPress的文章分栏显示实例</div>
<div class="one-sixth">这是WordPress的文章分栏显示实例</div>
<div class="one-sixth">这是WordPress的文章分栏显示实例</div>
<div class="one-sixth">这是WordPress的文章分栏显示实例</div>
<div class="one-sixth">这是WordPress的文章分栏显示实例</div>

Genesis的最新版本以及子模板都包含了这些column classes，如果你的模板里没有，那可以将下面的css代码填写到模板的style.css中

/* Column Classes---- */
.five-sixths,
.four-fifths,
.four-sixths,
.one-fifth,.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fifths,
.three-fourths,
.three-sixths,
.two-fifths,
.two-fourths,
.two-sixths,
.two-thirds {
	float: left;
	margin: 0 0 20px;
	padding-left: 3%;
}
.one-half,
.three-sixths,
.two-fourths {
	width: 48%;
}
.one-third,
.two-sixths {
	width: 31%;
}
.four-sixths,
.two-thirds {
	width: 65%;
}
.one-fourth {
	width: 22.5%;
}
.three-fourths {
	width: 73.5%;
}
.one-fifth {
	width: 17.4%;
}
.two-fifths {
	width: 37.8%;
}
.three-fifths {
	width: 58.2%;
}
.four-fifths {
	width: 78.6%;
}
.one-sixth {
	width: 14%;
}
.five-sixths {
	width: 82%;
}
.first {
	clear: both;
	padding-left: 0;
}

分栏显示代码汇总

1条评论