csswg-drafts/css-multicol/tests/01.html at d6c99f9c6f8fb50d4a481123f9c2fb4a901ec0b5 · w3c/csswg-drafts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Suggestion for Multi Column Layout scrolling issue</title>
<style type="text/css" media="all">
div {
	border: thin solid blue;
	padding: 5px;
	column-count: 3; -webkit-column-count: 3; -moz-column-count: 3;
	column-rule: 1px solid #696969; -webkit-column-rule: 1px solid #696969; -moz-column-rule: 1px solid #696969;
	column-gap: 10px; -moz-column-gap: 10px; -webkit-column-gap: 10px;
	font: 16px/20px sans-serif;
	height: 70px;
	margin-top: 2em;
}
</style>
</head>
<body>

<h1>Suggestion for problem of scrolling using CSS Multi-column Layout</h1>

<div>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis ligula at lorem iaculis scelerisque. Integer suscipit purus nec odio. Nulla dolor sem, varius vel, venenatis non, lacinia vel, justo. Morbi vel sapien nec nisl rutrum varius. Mauris tortor. Morbi odio. Integer neque orci, varius et, vulputate posuere, porttitor at, diam. Nunc dictum neque in libero. Aliquam vitae quam at metus pretium mattis. Mauris aliquam fermentum metus. Proin ornare. Praesent risus erat, pharetra ac, sagittis sed, sagittis at, metus. Integer diam justo, imperdiet eget, rhoncus nec, volutpat id, mauris.
			</p>
</div>

</body>
</html>