在 WordPress 中开发三列布局

Question

我希望在 wordpress 中为我的帖子制作一个三列布局，类似于本网站 Onlythebest.co 上的三列布局。谁能指导我找到一个好的插件来帮助我开发三列布局或建议在 wordpress 中创建三列布局的最佳方法？目前我没有任何代码可以分享，我正在研究在 wordpress 中完成开发三列网格的最佳方法。

提前谢谢你。

Answer 1

更常见的是，您可以寻找一个主题来完成您所追求的目标。您可以找到一个免费或高级主题，该主题内置于它的核心。在 wordpress.org 上查找免费主题，或者您可以在 codecanyon.net 上查找高级主题

如果您正在设计自定义主题，或尝试将 3 列网格实现到现有主题中，您可以使用免费的拖放插件，轻松实现您的目标。

http://wordpress.org/plugins/siteorigin-panels/screenshots/

它还可以轻松利用列/行内的小部件区域。

在 CodeCanyon 以 30 美元的价格出售的 Visual Composer 将是一个具有更多可扩展性和高级功能的高级页面构建器。此构建器也包含在一些顶级主题中，因此您可以在 CodeCanyon 上查找主题。

http://codecanyon.net/item/visual-composer-page-builder-for-wordpress/242431

---

对于手动标记，您至少需要 4 个 <div> 容器。 然后使用 css 制作样式代码来格式化列。

## HTML ##

<div class="wrapper">
    <div class="leftcol">left</div>
    <div class="middlecol">middle</div>
    <div class="rightcol">right</div>wrapper
</div>

## CSS ##

 .wrapper {
        width:100%;
        height:400px;
        padding:6px;
        /*you can remove this, only for visualization purposes*/
        background-color:black;
        /*you can remove this, only for visualization purposes*/
    }
    .leftcol, .middlecol, .rightcol {
        width:33%;
        height:400px;
        display:block;
        float:left;
    }
    .leftcol {
        background-color:green;
    }
    .rightcol {
        background-color:red;
    }
    .middlecol {
        background-color:blue;
    }