WordPress将分段分成两个偶数列？

Question

WordPress大师，我需要你的帮助！：

在PHP中将单个“段落”分成两个自然均匀的列是相对容易的，但我需要弄清楚如何将WordPress特定内容拆分为两个自然均匀的列，顶部的图像如下图所示...

以下是问题： 上面屏幕截图中显示的文字是一个段落，其中一个图片跨越整个两列宽度。此外，单个段落需要在中间按字（而不是字符）分割，并允许两列之间的均匀高度。我还没有找到任何关于如何使用WordPress语法执行此操作的示例。

Answer 1

根据我的理解，您希望拆分html的<p>标记，如图所示。上方。

这是不可能的！

原因是，<p>标记是默认的块元素。要渲染如上图所示的布局，您必须使用CSS编写HTML标记，如下所示：

<div>
 <img src="ur-img.jpg" />

 <div class="col-2">
  <p class="alignleft"> Text for first column </p>
  <p class="alignright"> Text for second column </p>
  <p class="clear"></p>
 <div>

<div>

CSS可能就像：

.col-2 p {
    width: 45%
}

.alignright {
    float:right;
}

.alignleft {
    float:left;
}
.clear{
   clear:both;

}

Wordpress默认主题提出了几个css类 - chk http://codex.wordpress.org/CSS

Answer 2

对于自动列，请使用jQuery，即此插件http://plugins.jquery.com/plugin-tags/auto-column或其他。

WP中没有内置功能，需要在DOM级别完成，而不是页面模板或PHP级别。

Answer 3

使用CSS

去css column属性：

.two-column {
  -moz-column-count: 2;
  -moz-column-gap: 1.5em;
  -moz-column-rule: none;
  -webkit-column-count: 2;
  -webkit-column-gap: 1.5em;
  -webkit-column-rule: none;
  column-count: 2;
  column-gap: 1.5em;
  column-rule: none;
}

以上是 Demo 。

• 版本10及更高版本的Internet Explorer supports this。
• This article有更多关于此主题以及如何添加对其他浏览器的支持。