css +div 实现上中下布局

作者：@kuaiquxie
作者的github：https://github.com/bitebita
本文为作者原创，如需转载，请注明出处：https://www.cnblogs.com/dzwj/p/16097751.html

 

　　以前用table，现在可以用css+div来实现页面布局。

 

　　div布局和table布局有什么不同呢？

div更灵活，定位比table要好使简单，修改起来也方便，比如我定义一个区域显示在屏幕(300，200)的位置，用div会很简单，table就繁琐了，现在网页的整体布局都用div了；但是展示信息还是用table比较简单，比如显示课程表如果有div实现会建立许多

 　　

　　上中（左右）下全屏布局实现

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #all{
            width:100%;
            height:100%; }
        #left{
            position:absolute;
            background-color:#3aadf0;
            float:left;
            width:20%;
            height:500px; }
        #right{
            position:absolute;
            background-color:red;
            float:right;
            width:80%;
            height:500px;;
            margin-left:20%;
        }
    </style>
</head>
<body>

<div id="all">
    <div id="left">
        <p>左边</p>
    </div>
    <div id="right">
        <p>右边</p>
    </div>
</div>

</body>
</html>
复制代码

 

 

只要设定到左右两侧的空白为自动即可。意即： #wrap { margin:0 auto;} 上面这段代码的意思是说使wrap这个div到左右两侧的距离自动设置，上下为0(可以为任意)。

posted @   kuaiquxie  阅读(530)  评论(0)  编辑  收藏  举报
相关博文：
·  css div居中显示方法
·  css使用
·  HTML 布局
·  HTML基础-09-布局（使用＜div＞实现，使用＜table＞实现）
·  [html] 使用div+css进行布局有什么好处？
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示