| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .multicol-wrapper>* { |
| font: 20px/1 Ahem, sans-serif; |
| } |
| div.multicol-wrapper { |
| border: thin solid black; |
| display: inline-block; |
| margin: 1em auto; |
| width: 360px; |
| } |
| .multicol-basic-ref { |
| background: yellow; |
| width: 360px; |
| } |
| .multicol-count-ref { |
| column-count: 3; |
| column-gap: 0; |
| column-rule: none; |
| } |
| .multicol-columns-ref { |
| columns: 3; |
| column-gap: 0; |
| column-rule: thin solid green; |
| } |
| .multicol-rule-ref { |
| column-count: 3; |
| column-gap: 0; |
| column-rule-width: thin; |
| column-rule-style: solid; |
| column-rule-color: green; |
| } |
| .multicol-fill-balance-ref { |
| columns: 3; |
| column-gap: 0; |
| column-rule: none; |
| column-fill: balance; |
| height: 6em; |
| } |
| .multicol-fill-auto-ref { |
| column-count: 3; |
| column-gap: 0; |
| column-fill: auto; |
| height: 6em; |
| } |
| .multicol-progression-reverse-ref { |
| column-count: 3; |
| column-gap: 0; |
| column-rule: none; |
| column-progression: reverse; |
| } |
| .multicol-basic-ref-item { |
| background: #000; |
| } |
| .item-1 { |
| background: purple; |
| color: purple; |
| } |
| .item-2 { |
| background: orange; |
| color: orange; |
| } |
| .item-3 { |
| background: blue; |
| color: blue; |
| } |
| </style> |
| <script> |
| function appendText() { |
| var arrayWrapper = [ |
| "multicol-basic-ref multicol-count-ref", |
| "multicol-basic-ref multicol-columns-ref", |
| "multicol-basic-ref multicol-rule-ref", |
| "multicol-basic-ref multicol-fill-balance-ref", |
| "multicol-basic-ref multicol-fill-auto-ref", |
| "multicol-basic-ref multicol-progression-reverse-ref" |
| ]; |
| |
| var arrayMulticol = [ |
| "multicol-basic-ref-item item-1", |
| "multicol-basic-ref-item item-2", |
| "multicol-basic-ref-item item-3", |
| ]; |
| |
| var text = "XXXX XXXX XXXX XXXX XXXX XXXX XXXX"; |
| |
| for (i = 0; i < arrayWrapper.length; ++i) { |
| var divWrapper = document.createElement("DIV"); |
| divWrapper.className = "multicol-wrapper"; |
| document.body.appendChild(divWrapper); |
| |
| var divMulticol = document.createElement("DIV"); |
| divMulticol.className = arrayWrapper[i]; |
| divWrapper.appendChild(divMulticol); |
| |
| for (j = 0; j < arrayMulticol.length; ++j) { |
| var spanNode = document.createElement("SPAN"); |
| spanNode.className = arrayMulticol[j]; |
| divMulticol.appendChild(spanNode); |
| |
| var textNode = document.createTextNode(text); |
| spanNode.appendChild(textNode); |
| } |
| |
| var brNode = document.createElement("BR"); |
| document.body.appendChild(brNode); |
| } |
| } |
| </script> |
| </head> |
| <body onload="appendText()"> |
| </body> |
| </html> |
