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

最新推荐文章于 2025-12-01 21:03:28 发布

最新推荐文章于 2025-12-01 21:03:28 发布 · 109 阅读

文章标签：

#html5 #css3 #布局

阅-H52 专栏收录该内容

35 篇文章

订阅专栏

本文通过两个实例展示了在CSS3之前实现网页布局的方法。第一个实例使用浮动元素进行并排布局，第二个实例则利用多列特性将文本内容进行自动分栏。这些方法为理解早期网页布局提供了实用案例。

<!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>

效果图：