Let's create a Web Page named columnbreaks.html to learnto insert column breaks.
<!doctype html>
<style type="text/css">
#wrapper{
width:30em;
height:20em;
border:3px double magenta;
margin:80px auto;
-webkit-column-count:5;
-webkit-column-rule:solid;
}
.box{
width:100px;
height:100px;
background-color:lime;
margin:3px;
-webkit-column-break-before:always;
}
</style>
<body>
<div id="wrapper">
<div class="box">
Example of column breaks
</div>
<div class="box">
Example of column breaks
</div>
<div class="box">
Example of column breaks
</div>
<div class="box">
Example of column breaks
</div>
<div class="box" style="background-color:red">
Example of column breaks
</div>
<div class="box">
Example of column breaks
</div>
<div class="box">
Example of column breaks
</div>
</body>
</html>
Here the content of body element is displayed in the five columns. however a column break is inserted always at the start of each div element.
The output of the columnbreaks.html file.
<!doctype html>
<style type="text/css">
#wrapper{
width:30em;
height:20em;
border:3px double magenta;
margin:80px auto;
-webkit-column-count:5;
-webkit-column-rule:solid;
}
.box{
width:100px;
height:100px;
background-color:lime;
margin:3px;
-webkit-column-break-before:always;
}
</style>
<body>
<div id="wrapper">
<div class="box">
Example of column breaks
</div>
<div class="box">
Example of column breaks
</div>
<div class="box">
Example of column breaks
</div>
<div class="box">
Example of column breaks
</div>
<div class="box" style="background-color:red">
Example of column breaks
</div>
<div class="box">
Example of column breaks
</div>
<div class="box">
Example of column breaks
</div>
</body>
</html>
Here the content of body element is displayed in the five columns. however a column break is inserted always at the start of each div element.
The output of the columnbreaks.html file.
No comments:
Post a Comment