DIV+CSS左中右布局案例

最新推荐文章于 2022-07-29 17:42:40 发布

luyunix

最新推荐文章于 2022-07-29 17:42:40 发布

阅读量857

点赞数

分类专栏： HTML，CSS，JS的学习文章标签： html css

本文链接：https://blog.csdn.net/weixin_37311400/article/details/78733798

版权

HTML，CSS，JS的学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

网页源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>左中右DIV+CSS布局案例</title>
        <style type="text/css">
            #container{
                background-color: aqua;
                width: 1000px;
                height: 600px;
            }
            #left{
                background-color: antiquewhite;
                width: 100px;
                height: 600px;
                float: left;/*漂浮属性,让块状元素不换行*/
            }
            #main{
                background-color: aquamarine;
                width: 700px;
                height: 600px;
            }
            #right{
                background-color: #FF0000;
                width: 100px;
                height: 600px;
                float: right;
            }
        </style>
    </head>
    <body>
        <center>
            <div id="container">
                <div id="left">LEFT</div>
                <div id="right">RIGHT</div>
                <div id="main">MAIN</div>
            </div>
        </center>
    </body>
</html>

页面效果