48 lines
1.2 KiB
HTML
48 lines
1.2 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<title>CSS3 Multi-column Layout: Single line test</title>
|
|
<style type="text/css">
|
|
.multicol {
|
|
-webkit-columns: 4;
|
|
-webkit-column-rule: #bbb 1px solid;
|
|
background-color: #eee;
|
|
}
|
|
p, div {
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
}
|
|
.large {
|
|
font-size: 30px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>
|
|
This test checks if CSS3 multi-column layout properly works
|
|
when the multi-column block contains only one line of text.
|
|
</p>
|
|
<p>
|
|
Test successful if the following text is readable
|
|
(i.e. not split into two different columns).
|
|
</p>
|
|
<p class="multicol">
|
|
Short text.
|
|
</p>
|
|
<p class="multicol">
|
|
<span class="large">Bigger text.</span>
|
|
</p>
|
|
<p class="multicol">
|
|
Partially <span class="large">big</span> text.
|
|
</p>
|
|
<div class="multicol">
|
|
<p>Nested block.</p>
|
|
</div>
|
|
<div>
|
|
<p class="multicol">Nested block #2.</p>
|
|
</div>
|
|
</body>
|
|
</html>
|