Differences

This shows you the differences between two versions of the page.

--- tips:simple_columns [2016-03-01 21:13] – created 94.45.75.40
+++ tips:simple_columns [2023-10-08 07:04] (current) – [FAQ] Confirmed compatibility with Jack Jackrum release for Simple Columns 74.102.94.120
@@ Line 3: / Line 3: @@
 ==== Description ====
-Implementation of columns without plugins.
+Implementation of columns without plugins.((Implementation of columns with plugins take a look at [[plugin:columns|Column Plugin]] and [[:plugin:wrap|Wrap Plugin]]))
-==== What need to do ====
+==== What should be done ====
 Add this code to ''<dokuwiki>/conf/entities.conf'':
 <code html>
-<col05>	<div style="float:left; width:5%;">
+<col2>	<div style="float:left;width:48%;">
-<col10>	<div style="float:left; width:10%;">
+<sep2>	</div><div style="float:left;width:3%;">&nbsp;</div><div style="float:left;width:48%;">
-<col20>	<div style="float:left; width:20%;">
+<col3>	<div style="float:left;width:31%;">
-<col30>	<div style="float:left; width:30%;">
+<sep3>	</div><div style="float:left;width:3%;">&nbsp;</div><div style="float:left;width:31%;">
-<col40>	<div style="float:left; width:40%;">
+<col4>	<div style="float:left;width:22%;">
-<col50>	<div style="float:left; width:50%;">
+<sep4>	</div><div style="float:left;width:4%;">&nbsp;</div><div style="float:left;width:22%;">
-<col60>	<div style="float:left; width:60%;">
+</col>	</div><div style="clear:both"></div>
-<col70>	<div style="float:left; width:70%;">
-<col80>	<div style="float:left; width:80%;">
-<col90>	<div style="float:left; width:90%;">
-</col>	</div>
-<clear>	<div style="clear:both"></div>
 </code>
+( ''<sep*>'' --- means //separator// )
 ==== Usage ====
-Example 1:
+**Example 1** //(Text divided by 4 columns)//:
 <code>
-<col10>
+<col4>
-...10% short short short short
+...1st column data
+<sep4>
+...2nd column data
+<sep4>
+...3rd column data
+<sep4>
+...4th column data
 </col>
-<col50>
+</code>
-...50% long long long long long long long long long long long long long long long
+**Example 2** //(Text divided by 2 columns)//:
+<code>
+<col2>
+...1st column data
+<sep2>
+...2nd column data
 </col>
-<col30>
+</code>
-...30% medium medium medium medium medium medium
+**Example 3** //(Text divided by 3 columns)//:
+<code>
+<col3>
+...1st column data
+<sep3>
+...2nd column data
+<sep3>
+...3rd column data
 </col>
-<clear>
 </code>
+**Examples 4** //(Columns of different width)//:
-Example 2:
+:!: The main thing is that the amount of % does not exceed 100.
 <code>
-<col30>
+<col3>
-  first
+...medium width of column ~33%
+<sep4>
+...small column ~25%
+<sep3>
+...medium width of column ~33%
 </col>
-<col05>
+</code>
-</col>
+----
-<col30>
-  second
-</col>
-<col05>
+<code>
+<col4>
+...small column ~25%
+<sep4>
+...small column ~25%
+<sep2>
+...the biggest width of column ~50%
 </col>
-<col30>
-  third
-</col>
-<clear>
 </code>
+===== Alternate with AUTO-BALANCED COLUMNS =====
+//Added on 10/04/18 by [[user>lenehey]]://
+The above tip is great and I really like using this mechanism rather than trying to make someone's plugin work for you.  But there is a much easier HTML mechanism that will auto-balance your columns. I tested this and it works GREAT!
+Add the following to ''entities.conf'' in your /conf directory.
+<code>
+<col2>  <div style="column-count: 2;">
+<col3>  <div style="column-count: 3;">
+</col>  </div>
+</code>
+Now simply put ''<col2>'' in front of the block of text you want split into two columns, or ''<col3>'' in front of the block of text you want to split into three columns, and then ''</col>'' at the end of that block of text.
+===== FAQ =====
+  * <del>Current compatibility : Does this still work for DK Jack Jackrum? Are there known incompatibilities with future releases of DK (deprecated things)?</del> Simple Columns method works on vanilla 2023-04-04a "Jack Jackrum" but unsure of known issues/incompatibilities.
+  * The Autobalanced Columns method works on vanilla 2023-04-04a "Jack Jackrum" without noticeable issues, unsure of known incompatibilities.
+===== Known issues =====