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...
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.
精彩评论