CSS布局——左右固定中间填满

最新推荐文章于 2022-11-14 15:02:44 发布

weixin_34413065

最新推荐文章于 2022-11-14 15:02:44 发布

阅读量304

点赞数

文章标签： xhtml

原文链接：https://my.oschina.net/taadis/blog/1592603

版权

为什么80%的码农都做不了架构师？>>>

小小例子，注意中间的div应该写在最后，留爪。

先上个高清无码图

源码实现

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="reset.css" rel="stylesheet" /> <!--重置默认样式,你可以把这句注释掉-->
    <style>
        div {
            line-height:60px; /*让字体垂直居中*/
        }

        div.box {
            width: 100%;
            height: 60px;
            background: yellow;
            text-align: center; /*让字体水平居中*/
            color: white;
        }

            div.box div.left, div.right {
                width: 60px;
                height: 60px;
                background: red;                
            }

            div.box div.left {
                float: left;
            }

            div.box div.right {
                float: right;
            }

            div.box div.center {
                height: 60px;
                background: green;      
                margin: 0 60px 0 60px; /*这句不要忘了，用来分开左右部分*/          
            }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">左固定</div>
        <div class="right">右固定</div>
        <div class="center">中间填满</div>      
    </div>
</body>
</html>

转载于:https://my.oschina.net/taadis/blog/1592603