开发者

WordPress Splitting paragraph into two even columns?

开发者 https://www.devze.com 2023-03-17 21:00 出处:网络
WordPress gurus, I need your help!: Splitting a single \"paragraph\" into two naturally even columns in PHP is relatively easy, but I need to figure out how to split WordPress specific content into t

WordPress gurus, I need your help!:

Splitting a single "paragraph" into two naturally even columns in PHP is relatively easy, but I need to figure out how to split WordPress specific content into two naturally even columns with an image on top like in the image below...

WordPress Splitting paragraph into two even columns?

Here's the issue: The text seen in the screenshot above is one parag开发者_如何学Pythonraph with a single image spanning the entire two column width. Also, the single paragraph needs to be split in the middle by word (not character) and allow for even height between the two columns. I have not yet found any examples of how to do this with WordPress syntax.


As per my understanding, you are expecting to split <p> tag of html as shown in fig. above.

Which is quite impossible !

The reason is, <p> tag is block element, by default. And to render layout as shown in above fig., you have to write HTML markup with CSS as below :

<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>

And CSS could be like:

.col-2 p {
    width: 45%
}

.alignright {
    float:right;
}

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

}

Wordpress default theme come up with few css classes - chk http://codex.wordpress.org/CSS


For automatic columns, use jQuery, i.e. this plugin http://plugins.jquery.com/plugin-tags/auto-column or others.

There's no built-in functionality in WP for this, and it needs to be done at the DOM level, not the page template or PHP level.


Use CSS

Have a go at the css column property:

.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;
}

Here is a Demo of the above.

  • Internet Explorer supports this from version 10 and up.
  • This article has more on the subject and how to add support for other browsers.
0

精彩评论

暂无评论...
验证码 换一张
取 消