第51章 布局相关的样式-多栏布局

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3之前的布局</title>
<style>
.div1,.div2{
	width:320px;
	float:left;
	background:green;}
.div1{ margin-right:30px;}
.div3{
	clear:both;
	width:100%;
	height:80px;
	float:none;
	background:#000;
	color:#fff;}
</style>
</head>
<body>
<div class="div1">
	<p>阅谁问君诵,水落清香浮。</p>
    <p>阅谁问君诵,水落清香浮。</p>
    <p>阅谁问君诵,水落清香浮。</p>
    <p>阅谁问君诵,水落清香浮。</p>
    <p>阅谁问君诵,水落清香浮。</p>
</div>
<div class="div2">
	<p>阅谁问君诵,水落清香浮。</p>
    <p>阅谁问君诵,水落清香浮。</p>
    <p>阅谁问君诵,水落清香浮。</p>
    <p>阅谁问君诵,水落清香浮。</p>
    <p>阅谁问君诵,水落清香浮。</p>
    <p>阅谁问君诵,水落清香浮。</p>
</div>
<div class="div3">备案信息</div>
</body>
</html>

效果图:
第51章 布局相关的样式-多栏布局_第1张图片
 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3之前的布局</title>
<style>
.cont{
	width:100%;
	-webkit-column-width:150px;
	-moz-column-width:150px;
	-webkit-column-gap:50px;
	-moz-column-gap:50px;
	-webkit-column-rule:solid 1px #909090;
	-moz-column-rule:solid 1px #909090;}
.footer{
	width:100%;
	height:80px;
	background:#000;
	color:#fff;
	text-align:center;}
</style>
</head>
<body>
<div class="cont">
	阅谁问君诵,水落清香浮。
    阅谁问君诵,水落清香浮。
    阅谁问君诵,水落清香浮。
    阅谁问君诵,水落清香浮。
    阅谁问君诵,水落清香浮。
    阅谁问君诵,水落清香浮。
    阅谁问君诵,水落清香浮。
    阅谁问君诵,水落清香浮。
    阅谁问君诵,水落清香浮。
    阅谁问君诵,水落清香浮。
    阅谁问君诵,水落清香浮。
    阅谁问君诵,水落清香浮。
    阅谁问君诵,水落清香浮。
    阅谁问君诵,水落清香浮。
    阅谁问君诵,水落清香浮。
    阅谁问君诵,水落清香浮。
</div>
<div class="footer">备案信息</div>
</body>
</html>

效果图:
第51章 布局相关的样式-多栏布局_第2张图片
 

 

你可能感兴趣的:(html5,css3,布局)