Maison > interface Web > tutoriel CSS > le corps du texte

Quatre façons d'implémenter une disposition à double aile volante avec CSS (avec code)

不言
Libérer: 2018-09-10 16:34:55
original
4579 Les gens l'ont consulté

Le contenu de cet article concerne les quatre méthodes pour réaliser une disposition à double aile volante avec CSS (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Rendu de la disposition du Saint Graal et de la disposition à double aile volante

Quatre façons dimplémenter une disposition à double aile volante avec CSS (avec code)

À partir des rendus, les effets de la disposition du Saint Graal et de la double aile volante La mise en page est la même.
La mise en page Holy Grail et la mise en page Double Wing ont une largeur fixe sur les côtés gauche et droit, et la largeur du contenu au milieu est adaptative, c'est-à-dire 100 %

Disposition du Saint Graal

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .clearfix:before,
    .clearfix:after{
        display: table;
        content: " ";
        clear: both;
    }
    .container{
        padding: 0 200px;
    }
    .header,
    .footer{
        height: 200px;
        font-size: 28px;
        background-color: #f3f3f3;
    }
    .left{
        position: relative;
        /* 2、将.left再次拉到最左边,否则.main的左侧会有200px的空白 */
        left: -200px;
        float: left;
        width: 200px;
        min-height: 300px;
        /* 1、将.left拉到最左边,原来.left是掉下去的 */
        margin-left: -100%;
        background-color: #f00;
    }
    .main{
        float: left;
        width: 100%;
        min-height: 300px;
        background-color: #c32228;
    }
    .right{
        position: relative;
        /* 2、将.right再次拉到最右边,否则.main的右侧会有200px的空白 */
        right: -200px;
        float: left;
        width: 200px;
        /*/1、将.right拉到最右边,原来.right是掉下去的 */
        margin-left: -200px;
        min-height: 300px;
        background-color: #f90;
    }
</style>
Copier après la connexion
<div class="header">header</div>
<div class="container clearfix">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="footer">footer</div>
Copier après la connexion

Floating réalise une disposition à double aile volante

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .clearfix:before,
    .clearfix:after{
        display: table;
        content: " ";
        clear: both;
    }
    .header,
    .footer{
        height: 200px;
        font-size: 28px;
        background-color: #f3f3f3;
    }
    .left{
        float: left;
        width: 200px;
        min-height: 300px;
        /* 将.left拉到最左边,原来.left是掉下去的 */
        margin-left: -100%;
        background-color: #f00;
    }
    .main{
        float: left;
        width: 100%;
        min-height: 300px;
        /* .left、.right各占了200px,因此需要将其抵消掉 */
        padding: 0 200px;
        background-color: #c32228;
    }
    .right{
        float: left;
        width: 200px;
        /* 将.right拉到最右边,原来.right是掉下去的 */
        margin-left: -200px;
        min-height: 300px;
        background-color: #f90;
    }
    
</style>
Copier après la connexion
<div class="header">header</div>
<div class="container clearfix">
    <div class="main">
        <div class="main-inner">main</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="footer">footer</div>
Copier après la connexion

table-cell réalise une disposition à double aile volante (IE8 est également compatible ~)

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .container{
        display: table;
    }
    .header,
    .footer{
        height: 200px;
        font-size: 28px;
        background-color: #f3f3f3;
    }
    .left,
    .right,
    .main{
        /* 外层容器使用table-cell布局,设置元素为table-cell布局后它们就能在一行显示了,display: table-cell;设置宽度无效,
因此他们的宽度由内容撑开。 */
        display: table-cell;            
    }
    .left-inner{
        width: 200px;
        min-height: 300px;
        background-color: #f00;
    }
    .main{
        width: 100%;            
    }
    .main-inner{
        min-height: 300px;
        background-color: #c32228;
    }
    .right-inner{
        width: 200px;
        min-height: 300px;
        background-color: #f90;
    }
</style>
Copier après la connexion
<div class="header">header</div>
<div class="container clearfix">
    
    <div class="left">
        <div class="left-inner">left</div>
    </div>
    <div class="main">
        <div class="main-inner">main</div>
    </div>
    <div class="right">
        <div class="right-inner">right</div>
    </div>
</div>
<div class="footer">footer</div>
Copier après la connexion

Le positionnement absolu réalise une disposition à double aile volante

Il y a un petit problème lors de l'utilisation du positionnement absolu : la hauteur du conteneur parent ne peut être déterminée que par la hauteur de .main

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .container{
        position: relative;
        padding: 0 200px;
    }
    .header,
    .footer{
        height: 200px;
        font-size: 28px;
        background-color: #f3f3f3;
    }
    .left{
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        min-height: 300px;
        background-color: #f00;
    }
    .main{
        min-height: 300px;
        background-color: #c32228;
    }
    .right{
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        min-height: 300px;
        background-color: #f90;
    }    
</style>
Copier après la connexion
<div class="header">header</div>
<div class="container clearfix">
    <div class="left">left</div>
    <div class="main">mian</div>
    <div class="right">right</div>
</div>
<div class="footer">footer</div>
Copier après la connexion

Utilisez flex pour implémenter une disposition à double aile volante (avec question de compatibilité)

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .clearfix:before,
    .clearfix:after{
        display: table;
        content: " ";
        clear: both;
    }
    .container{
        display: flex;
    }
    .header,
    .footer{
        height: 200px;
        font-size: 28px;
        background-color: #f3f3f3;
    }
    .left{
        flex: 0 0 200px;
        width: 200px;
        min-height: 300px;
        background-color: #f00;
    }
    .main{
        flex: 1;
        width: 100%;
        min-height: 300px;
        background-color: #c32228;
    }
    .right{
        flex: 0 0 200px;
        width: 200px;
        min-height: 300px;
        background-color: #f90;
    }
</style>
Copier après la connexion
<div class="header">header</div>
<div class="container clearfix">
    
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
</div>
<div class="footer">footer</div>
Copier après la connexion

Recommandations associées :

Qu'est-ce que une disposition à double aile volante ? Partagez un exemple de code de disposition à double aile volante

Layout CSS Holy Grail Layout & Double Flying Wing Layout_html/css_WEB-ITnose

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!

source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal