第51章 布局相关的样式-多栏布局
程序员文章站
2022-06-16 21:31:20
...
<!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>
效果图：
<!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>
效果图：
上一篇： 霜降吃啥东西