zoukankan      html  css  js  c++  java
  • DIV固定宽度和动态拉伸混合水平排列

    1.效果图

     

     

    2.源代码

    html

    <h2>1.头部固定,尾部拉伸</h2>
    <div class="container" id="div1">
        <div class="head"></div>
        <div class="tail"></div>
    </div>
    
    <h2>2.尾部固定,头部拉伸</h2>
    <div class="container" id="div2">
        <div class="tail"></div>
        <div class="head"></div>
    </div>
    
    <h2>3.头尾固定,中间拉伸</h2>
    <div class="container" id="div3">
        <div class="head"></div>
        <div class="tail"></div>
        <div class="center"></div>
    </div>
    
    <h2>4.中间固定,两头拉伸</h2>
    <div class="container" id="div4">
        <div class="head">
            <div class="inner"></div>
        </div>
        <div class="tail">
            <div class="inner"></div>
        </div>
        <div class="center"></div>
    </div>

    css

    <!-- 样式 -->
    <style type="text/css">
        /* 容器宽度为100% */
        .container{
            width: 100%;
        }
    
        /** 头部div固定宽度 **/
        #div1 .head{
            width: 200px;
            height: 100px;
            background-color: #00F7DE;
            float: left;
        }
    
        /** 尾部div自动填充拉伸 **/
        #div1 .tail{
            width: auto; /** 宽度不写或者auto都行 **/
            height: 100px;
            margin-left: 200px;
            background-color: #FFB800;
        }
    
        /** 尾部div固定宽度 **/
        #div2 .tail{
            width: 200px;
            height: 100px;
            background-color: #FFB800;
            float: right;
        }
    
        /** 头部div自动填充拉伸 **/
        #div2 .head{
            width: auto;
            height: 100px;
            margin-right: 200px;
            background-color: #00F7DE;
        }
    
    
        #div3 .head{
            width: 200px;
            height: 100px;
            background-color: #00F7DE;
            float:left
        }
    
        #div3 .center{
            width:auto;
            height: 100px;
            background-color: #009f95;
            margin-left: 200px;
            margin-right: 200px;
        }
    
        #div3 .tail{
            width:200px;
            height: 100px;
            background-color:#FFB800;
            float: right;
        }
    
        #div4{
            position: relative;
        }
    
        #div4 .head{
            width: 50%;
            height: 100px;
            float: left;
        }
    
        #div4 .head .inner{
            height: 100px;
            background-color: #00F7DE;
            margin-right: 100px;
        }
    
        #div4 .tail{
            width: 50%;
            height: 100px;
            float: left;
        }
    
        #div4 .tail .inner{
            height: 100px;
            background-color:#FFB800;
            margin-left: 100px;
        }
    
        #div4 .center{
            position: absolute;
            width: 200px;
            height: 100px;
            left: 50%;
            margin-left: -100px;
            background-color: #009f95;
        }
    </style>
  • 相关阅读:
    要读的书
    装好卫生间的三大要素
    效率由心生,快速提高工作效率秘诀
    玄关装饰设计5大形式
    客厅吊顶装修设计技巧
    如何去除木质家具的污垢
    讲一下SqlDataReader的关闭问题,出现"阅读器关闭时尝试调用 FieldCount 无效"
    SQL SERVER 中如何使用行锁
    汤唯:《在街头卖艺的那些日子》
    【转】取模(mod)与取余(rem)的区别——Matlab学习笔记
  • 原文地址:https://www.cnblogs.com/hdwang/p/8277357.html
Copyright © 2011-2022 走看看