CSS排版之对float排版和position的absolute的理解（周三贴）

最新推荐文章于 2021-05-31 02:06:08 发布

陈伟鹏2016

最新推荐文章于 2021-05-31 02:06:08 发布

阅读量1k

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/dayuqi/article/details/53374140

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

如图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局编程挑战</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{height:100px;background:#9CF;}

.main{margin-left:-240px;height:600px;background:red;position:relative;}

.left{margin-left:240px; width:200px; height:600px;background:blue;position:absolute;  }

.right{margin-left:440px;width:100%; height:600px;background:green; }

.foot{height:50px;background:yellow;}

</style>

</head>javascript:;

<body>
<div class="top">top</div>
<div class="main">
    <div class="left">left</div>

    <div class="right">right</div>
</div>
<div class="foot">foot</div>

效果图是这样子的