博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
双飞翼布局实例
阅读量:5846 次
发布时间:2019-06-18

本文共 747 字,大约阅读时间需要 2 分钟。

<!DOCTYPEhtml>

<htmllang="en">

<head>

    <meta charset="UTF-8">

    <style>

        #center_div,#left_div,#right_div{

            text-align: center;

        }

        .column{

            float: left;

        }

        #container{

            width: 100%;

        }

        #center_div{

            width: 100%;

            background-color: blue;

        }

        #left_div{

            width: 300px;

            margin-left: -100%;

            background-color: green;

        }

        #right_div{

            width: 200px;

            margin-left: -200px;

            background-color: yellow;

        }

        #center_div  #mainWrap{

            margin-left: 300px;

            margin-right: 200px;

        }

    </style>

    <title>双飞翼</title>

</head>

<body>

<divid="container">

    <div id="center_div"class="column">

        <div id="mainWrap">主要内容</div></div>

    <div id="left_div"class="column">左边的div</div>

    <div id="right_div"class="column">右边的div</div>

</div>

</body>

</html>

转载于:https://www.cnblogs.com/liuyuancheng/p/7252645.html

你可能感兴趣的文章
oracle:plsql学习总结(oracle database 10g sql 开发指南)
查看>>
〔转〕Word域的应用和详解2_等式和公式域
查看>>
FZU 1502 Letter Deletion
查看>>
寄存器是什么 有什么作用
查看>>
转载 《Python爬虫学习系列教程》学习笔记
查看>>
NGUI的输入框制作(attach- input filed script的使用)
查看>>
[异常笔记] zookeeper集群启动异常: Cannot open channel to 2 at election address ……
查看>>
mysql 03
查看>>
NgDL:第三周:浅层NN
查看>>
OpenCV基于傅里叶变换进行文本的旋转校正
查看>>
Centreon 安装部署指南
查看>>
项目管理修炼之道之规划项目
查看>>
学生机房PC也桌面虚拟化!
查看>>
Ext.Net 1.2.0_分析 Ext.Net.ResourceHandler 资源处理程序
查看>>
dedecms的arclist循环中判断第一个li添加css,否则不加
查看>>
java—三大框架详解,其发展过程及掌握的Java技术慨括
查看>>
Git 常用命令
查看>>
HDU 2289 Cup (二分)
查看>>
C#中使用Monitor类、Lock和Mutex类来同步多线程的执行
查看>>
[翻译] 使用CSS进行文字旋转
查看>>