DIV固定宽度和动态拉伸混合水平排列

2018-01-12 21:27:13来源:cnblogs.com作者:追极人点击

分享

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>

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台