28
2020
09

如何实现中间div宽度固定,两端div自适应宽度?说出2种方法

  • float法

通过使两边的div左右浮动,脱离文档流,再为中间的div设置margin-left,margin-right值为左右div的宽度即可.此处应该注意的是中间div在代码中的位置,应该放在最后。存在问题:在屏幕宽度减少至一定程度后,右边div会错位,另起一行。

/*float法*/

.float .left {

    float: left;

    height: 200px;

}

.float .center {

    margin: 0 400px;

    height: 200px;

}

.float .right {

    float: right;

    height: 200px;

}


  • display:flex法

<style type="text/css">

    .container{

        width: 100%;

        height: 500px;

        display: flex;

    }

    .div01,.div03{

        background: black;

        flex: auto;

    }

    .div02{

        background: red;

        width: 220px;

    }

  </style>  


<div class="container">

    <div class="div01"></div>

    <div class="div02"></div>

    <div class="div03"></div>

</div>



// 使用"display: flex"声明使用弹性盒布局。



//  CSS 属性声明"flex-direction"用来确定主轴的方向:

// row(默认值)主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是 ltr,则排列顺序是从左到右;如果文档顺序是rtl,则排列顺序是从右到左。

// row-reverse  主轴为水平方向。排列顺序与页面的文档顺序相反。

// column   主轴为垂直方向。排列顺序为从上到下。

// column-reverse   主轴为垂直方向。排列顺序为从下到上。



// CSS 属性"flex-wrap"用来声明当容器中条目的尺寸超过主轴尺寸时应采取的行为。

// nowrap(默认值)容器中的条目只占满容器在主轴方向上的一行,可能出现条目互相重叠或超出容器范围的现象。

// wrap 当容器中的条目超出容器在主轴方向上的一行时,会把条目排列到下一行。下一行的位置与交叉轴的方向一致。

// wrap-reverse 与wrap的含义类似,不同的是下一行的位置与交叉轴的方向相反。

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。