OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 <head> | |
3 <style> | |
4 div { border:5px solid maroon; -webkit-column-count:2; width:750px; margin: 1em
0 } | |
5 h2 { -webkit-column-span: all; background-color:#eeeeee } | |
6 </style> | |
7 </head> | |
8 <body> | |
9 | |
10 <div id="one"> | |
11 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac m
i. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Pro
in nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel
orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam b
ibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, int
erdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. | |
12 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. | |
13 | |
14 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac m
i. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Pro
in nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel
orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam b
ibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, int
erdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. | |
15 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. | |
16 | |
17 <h2>This is a first span.</h2> | |
18 <h2 id="before">This is a second span.</h2> | |
19 | |
20 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac m
i. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Pro
in nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel
orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam b
ibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, int
erdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. | |
21 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. | |
22 | |
23 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac m
i. | |
24 </div> | |
25 | |
26 <script> | |
27 one = document.getElementById('one'); | |
28 one.insertBefore(document.createTextNode("This text should be sitting between tw
o spanning elements."), document.getElementById('before')); | |
29 </script> | |
30 | |
31 <div id="two"> | |
32 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim a
c mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem.
Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis v
el orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nulla
m bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis,
interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. | |
33 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. | |
34 </p> | |
35 | |
36 <p id="beforetwo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Null
a varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscin
g rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Se
d vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonu
mmy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod,
pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentum
vestibulum. | |
37 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. | |
38 </p> | |
39 | |
40 <h2>This is a second span.</h2> | |
41 | |
42 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac m
i. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Pro
in nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel
orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam b
ibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, int
erdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. | |
43 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. | |
44 | |
45 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac m
i. | |
46 </div> | |
47 | |
48 <script> | |
49 h2 = document.createElement("h2"); | |
50 h2.appendChild(document.createTextNode("This is a first span.")); | |
51 two = document.getElementById('two'); | |
52 two.insertBefore(h2, document.getElementById('beforetwo')); | |
53 </script> | |
54 | |
55 <div id="three"> | |
56 <span> | |
57 <span style="display:block">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Nulla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque
adipiscing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et
, nisi. Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem
. Nam nonummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempu
s euismod, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor co
ndimentum vestibulum. | |
58 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. | |
59 </span> | |
60 </span> | |
61 <p id="beforethree">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nu
lla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipisc
ing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi.
Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam no
nummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismo
d, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentu
m vestibulum. | |
62 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. | |
63 </p> | |
64 | |
65 <h2>This is a second span.</h2> | |
66 | |
67 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac m
i. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Pro
in nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel
orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam b
ibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, int
erdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. | |
68 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. | |
69 | |
70 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac m
i. | |
71 </div> | |
72 | |
73 <script> | |
74 h2 = document.createElement("h2"); | |
75 h2.appendChild(document.createTextNode("This is a first span.")); | |
76 three = document.getElementById('three'); | |
77 three.insertBefore(h2, document.getElementById('beforethree')); | |
78 </script> | |
79 | |
80 </body> | |
81 </html> | |
OLD | NEW |