css多栏布局代码实例
分类：实例代码
本章节分享一段代码实例，它实现了多栏布局效果，需要的朋友可以做一下参考。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
margin: 0;
padding: 0;
text-decoration: none;
}
.col-wrapper {
padding: 20px;
background-color: #9F8989;
-webkit-column-width: 220px; /*多行布局*/
-webkit-column-gap: 3rem; /*调节间距*/
-webkit-column-rule: 2px dotted #ccc; /*美化多列布局*/
}
.col-wrapper h2 {
-webkit-column-span: all;
padding-bottom: .5rem;
}
.col-wrapper p {
padding-bottom: 1rem;
}
.mainnav {
width: 84%;
background-color: #efefef;
margin: 0 auto 1rem auto;
padding: 1rem;
}
.mainnav ul {
list-style-type: none;
display: flex;
justify-content: space-between;
}
.mainnav ul li {
border: 1px solid #999;
text-align: center;
font-size: 150%;
}
.mainnav ul li a {
padding: 10px;
}
</style>
</head>
<body>
<div class="col-wrapper">
<h2>Extracts from "Our Cats, by Harrison Weir"</h2>
<p>In our urban and suburban houses what should we do without cats? In our sitting or bedrooms, our libraries, in our kitchens and storerooms, our farms, barns, and rickyards, in our docks, our granaries, our ships, and our wharves, in our corn markets, meat markets, and other places too numerous to mention, how useful they are! In our ships, however, the rats oft set them at defiance; still they are of great service.</p>
<p>How wonderfully patient is the cat when watching for rats or mice, awaiting their egress from their place of refuge or that which is their home! How well Shakespeare in Pericles, Act iii., describes this keen attention of the cat to its natural pursuit!</p>
<p>A slight rustle, and the fugitive comes forth; a quick, sharp, resolute motion, and the cat has proved its usefulness. Let any one have a plague of rats and mice, as I once had, and let them be delivered therefrom by cats, as I was, and they will have a lasting and kind regard for them.</p>
<p>A friend not long since informed me that a cat at Stone's Distillery was seen to catch two rats at one time, a fore foot on each. All the cats kept at this establishment, and there are several, are of the red tabby colour, and therefore most likely all males.</p>
<p>I am credibly informed of a still more extraordinary feat of a cat in catching mice, that of a red tabby cat which on being taken into a granary at Sevenoaks where there were a number of mice, dashed in among a retreating group, and secured four, one with each paw and two in her mouth.</p>
</div>
<nav class="mainnav">
<ul>
<li><a href="">Introductory</a></li>
<li><a href="">The First Cat Show</a></li>
<li><a href="">Habits</a></li>
<li><a href="">Trained Cats</a></li>
<li><a href="">Usefulness of Cats</a></li>
</ul>
</nav>
</body>
</html>
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu