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

Posted 追极

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

以上是关于DIV固定宽度和动态拉伸混合水平排列的主要内容,如果未能解决你的问题,请参考以下文章

wpf水平对齐左和拉伸?

将相对div拉伸到其静态父级的高度

GTK Treeview 固定宽度

如何使 flexbox 响应式?

如何使具有特定宽度和固定位置的 div 居中?

除了 IE6 之外,2 个 div 都是水平的吗?怎么解决?