116 lines
2.9 KiB
HTML
116 lines
2.9 KiB
HTML
<!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>
|