Maison > Article > interface Web > Explication détaillée de la disposition CSS à double aile volante

Explication détaillée de la disposition CSS à double aile volante

php中世界最好的语言original: 2018-03-21 13:28:082643parcourir

Cette fois, je vais vous apporter une explication détaillée de la disposition CSS à double aile volante. Quelles sont les précautions pour implémenter la disposition CSS à double aile volante. Voici un cas pratique, jetons un coup d'œil.

La disposition à double aile volante est une disposition à trois colonnes avec une largeur et une hauteur fixes aux deux extrémités et une disposition adaptative à trois colonnes au milieu

Prenons d'abord une photo. les blocs gris à gauche et à droite ont une largeur et une hauteur fixes. La zone verte au milieu est adaptative en largeur et en hauteur

Méthode 1 : implémentée via disposition élastique flexible

Regardez le code

//HTML结构，p2是中间的自适应区域
...
<body>
    <p class="wrap">
        <p class="p1"></p>  
        <p class="p2"></p>
        <p class="p3"></p>
    </p>
</body>
...

*{  //先简单粗暴的解决一下浏览器的默认样式  
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing:border-box;   //使用border-box，盒模型好计算，妈妈再也不用担心我算不清块宽高了
}
.wrap{
    width: 100%;
    height: 100%;
    display: flex;     //使用弹性布局
    flex-flow:row nowrap;  //以沿主轴方向行显示，不换行，从而来显示3个块
    justify-content:space-around;  //这一个加和不叫其实也没事，加上去的意思就是两端对齐
}

[class^=&#39;p&#39;]{  // 给所有的p都加上高和边框样式，方便观看，不然都缩成一条线了
    height: 400px;
    border: 1px solid #f00;
}

.p1,.p3{  //给两端的p固定的宽
    width: 200px;
    background-color: #ccc;
    flex-shrink: 1; //默认是1，所以不用写也没事，写出来自是表达这个意思
}
.p2{
    background-color: #0f0;
    flex-grow:1;  //这个比较重要，作用是让第二个块的宽度撑满剩余的空间
}

Méthode 2 : mise en œuvre par positionnement

La structure HTML reste inchangé, regardez le style

.wrap{
    width: 100%;  //同样实现宽高100%铺开
    height: 100%;
    position: relative;  //父层添加相对定位，让子元素相对父层来定位
}
[class^=&#39;p&#39;]{
    height: 400px;
    border: 1px solid #f00;
}
.p1,.p3{
    position: absolute;
    width: 200px;
    background-color: #ccc;
}
.p1{
    left: 0;  //固定在父层的左侧
    top: 0;
}
.p3{
    right: 0;  //固定在父层的右侧
    top: 0;
}
.p2{
    background-color: #0f0;
    /*这个是关键，我们没有给中间的p2添加过宽属性，所以默认占用父层宽的100%，
     由于两侧块宽是固定的，所以中间的自适应块左右分别200px的外边距中间的content区域就会实现自适应*/
    margin: 0 200px;  
}

Effet

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article, venez pour des informations plus intéressantes. Faites attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :

Implémentation de la barre de menu de transition en douceur de la transition CSS3

Simulation de l'effet d'un cœur qui bat toutes les secondes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Implémentation de la barre de menus de transition en douceur CSS3 TransitionArticle suivant：Implémentation de la barre de menus de transition en douceur CSS3 Transition

Articles Liés

Voir plus