html5第七课时，双飞翼布局，理解注释！！

来源：互联网发布：c语言中字符串的定义编辑：程序博客网时间：2024/05/29 06:47
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>双飞翼布局</title>    <style>        #parent{            width: 600px;            height: 600px;        }        #main{            height: 100%;            width: 100%;            color: white;            background-color: #585858;            text-align: center;        }        #left{            height: 100%;            width: 20%;            background-color: #f2ad0a;            color: white;            /*这里的100%为main的宽度，            相当于是把left给左移了，            刚好实现左边与main的对齐。*/            margin-left: -100%;        }        #right{            height: 100%;            width: 30%;            background-color: red;            color: white;            /*这里的30%为right自身的宽度，            相当于是自己向左移了自身的一个宽度，            刚好实现右边与main的对齐。*/            margin-left: -30%;        }        #right,#left,#main{            float: left;        }        #mainln{            margin: 0 20% 0 30%;            /*左边及右边部分元素是会被left/right挡住的，            还必须在main里面再添加一个div(class="mainIn")，            设置margin:0 30% 0 20%;，把两边内容给挤开，这样才是完美的效果。*/        }    </style></head><body><div id="parent">    <div id="main">        main        <div id="mainln"></div>    </div>    <div id="left">left</div>    <div id="right">right</div></div></body></html>
1 0