zoukankan      html  css  js  c++  java
  • CSS布局——左右固定中间填满

    小小例子,注意中间的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 {
                 100%;
                height: 60px;
                background: yellow;
                text-align: center; /*让字体水平居中*/
                color: white;
            }
    
                div.box div.left, div.right {
                     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>
    
  • 相关阅读:
    angular js 自定义指令
    web api 解决跨域的问题
    angular 监听ngrepeat结束时间
    redis关闭和启动
    intellij idea快捷键
    mysql连接字符串
    crontab命令格式
    maven中scope属性的
    maven pom文件元素说明
    引入maven以外的jar包
  • 原文地址:https://www.cnblogs.com/taadis/p/12125952.html
Copyright © 2011-2022 走看看