Introduction à 6 façons de disposition CSS à hauteur égale

L'éditeur suivant vous présentera une introduction à 6 méthodes de disposition CSS à hauteur égale. L’éditeur le trouve plutôt bien, alors j’aimerais le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur pour y jeter un œil.

Comme mentionné précédemment,

La disposition à hauteur égale fait référence à une méthode de disposition dans laquelle les hauteurs des éléments enfants sont égales dans l'élément parent. La mise en œuvre de la disposition à hauteur égale inclut une hauteur pseudo-égale et une hauteur pseudo-égale réelle semble uniquement être une hauteur égale, tandis que la hauteur véritablement égale est la hauteur réelle égale. Cet article présentera la simulation de bordure, la marge négative, deux pseudo-contours, ainsi que l'implémentation de table, l'implémentation absolue, l'implémentation flex et js pour déterminer les quatre vraies dispositions de contour

Pseudo-contour

Simulation de bordure　

Parce que la bordure de l'élément et la hauteur de l'élément sont toujours la même hauteur , utilisez l'élément. La couleur de la bordure est utilisée pour masquer la couleur d'arrière-plan des éléments frères gauche et droit. Utilisez ensuite absolu pour recouvrir les éléments gauche et droit avec des arrière-plans transparents sur les bordures gauche et droite de l'élément central pour obtenir un effet visuel de hauteur égale

[Note] La hauteur des éléments sur les côtés gauche et droit ne peut pas être supérieur à la hauteur de l'élément central, sinon il ne peut pas être pris en charge. Ouvrir la hauteur du conteneur

Code CSSCopier le contenu dans le presse-papiers

<style>   
body,p{margin: 0;}   
.parent{   
    position: relative;   
}   
.center{   
    box-sizing:border-box;   
    padding: 0 20px;   
    background-clip: content-box;   
    border-left: 210px solid lightblue;   
    border-right: 310px solid lightgreen;   
}   
.left{   
    position: absolute;   
    top: 0;   
    left: 0;   
    width: 200px;   
}   
.rightright{   
    position: absolute;   
    top: 0;   
    rightright: 0;   
    width: 300px;   
}   
</style>

Code XML/HTMLCopier le contenu dans le presse-papiers

<p class="parent" style="background-color: lightgrey;">
    <p class="left">
        <p>left</p>
    </p>
    <p class="center" style="background-color: pink;">
        <p>center</p>
        <p>center</p>
    </p>
    <p class="right">
        <p>right</p>
    </p>
</p>

Marge négative 　

Parce que l'arrière-plan est affiché dans la zone de remplissage, définissez une grande valeur de padding-bottom Ensuite, définissez une margin-bottom négative avec la même valeur afin que la couleur d'arrière-plan couvre la zone de l'élément et soit conforme à la formule de calcul de l'élément. modèle de boîte pour obtenir un effet visuel d'égale hauteur

[Note] Si la page utilise point d'ancrage pour sauter, une partie des informations textuelles sera caché

[Note] Si l'image d'arrière-plan de la page est positionnée jusqu'à la fin Vous ne pourrez pas voir l'image d'arrière-plan

Code CSSCopier le contenu dans le presse-papiers

<style>   
body,p{margin: 0;}   
.parent{   
    overflow: hidden;   
}   
.left,.centerWrap,.rightright{   
    float: left;   
    width: 50%;   
    padding-bottom: 9999px;   
    margin-bottom: -9999px;   
}   
.center{   
    margin: 0 20px;   
}   
.left,.rightright{   
    width: 25%;   
}   
</style>

Code XML/HTMLCopier le contenu dans le presse-papiers

<p class="parent" style="background-color: lightgrey;">
    <p class="left" style="background-color: lightblue;">
        <p>left</p>
    </p>
    <p class="centerWrap">
        <p class="center" style="background-color: pink;">
            <p>center</p>
            <p>center</p>
        </p>
    </p>

    <p class="right" style="background-color: lightgreen;">
        <p>right</p>
    </p>
</p>

Vraie hauteur égale

table　

élément table L'élément table-cell a par défaut des hauteurs égales

Code CSSCopier le contenu dans le presse-papiers

<style>   
body,p{margin: 0;}   
.parent{   
    display: table;   
    width: 100%;   
    table-layout: fixed;   
}   
.left,.centerWrap,.rightright{   
    display: table-cell;   
}   
.center{   
    margin: 0 20px;   
}   
</style>

Code XML/HTMLCopier le contenu dans le presse-papier

<p class="parent" style="background-color: lightgrey;">
    <p class="left" style="background-color: lightblue;">
        <p>left</p>
    </p>
    <p class="centerWrap">
        <p class="center" style="background-color: pink;">
            <p>center</p>
            <p>center</p>
        </p>
    </p>
    <p class="right" style="background-color: lightgreen;">
        <p>right</p>
    </p>
</p>

absolu　

Définissez le top:0;bottom:0; de l'élément enfant de sorte que la hauteur de tous les éléments enfants soit la même que la hauteur de l'élément parent, obtenant ainsi un effet de hauteur égale

Code CSSCopier le contenu dans le presse-papiers du tableau

<style>   
body,p{margin: 0;}   
.parent{   
    position: relative;   
    height: 40px;   
}   
.left,.center,.rightright{   
    position: absolute;   
    top: 0;   
    bottombottom: 0;   
}   
.left{   
    left: 0;   
    width: 100px;   
}   
.center{   
    left: 120px;   
    rightright: 120px;   
}   
.rightright{   
    width: 100px;   
    rightright: 0;   
}   
</style>

Code XML/HTML Copier le contenu dans le presse-papiers

<p class="parent" style="background-color: lightgrey;">
    <p class="left" style="background-color: lightblue;">
        <p>left</p>
    </p>
    <p class="center" style="background-color: pink;">
        <p>center</p>
        <p>center</p>
    </p>
    <p class="right" style="background-color: lightgreen;">
        <p>right</p>
    </p>
</p>

flex　

Les éléments évolutifs dans flex sont étirés à la hauteur de l'élément parent par défaut, et le un effet de hauteur égale est également obtenu

CSS Code复制内容到剪贴板

<style>   
body,p{margin: 0;}   
.parent{   
    display: flex;   
}   
.left,.center,.rightright{   
    flex: 1;   
}   
.center{   
    margin: 0 20px;   
}   
</style>

XML/HTML Code复制内容到剪贴板

<p class="parent" style="background-color: lightgrey;">
    <p class="left" style="background-color: lightblue;">
        <p>left</p>
    </p>
    <p class="center" style="background-color: pink;">
        <p>center</p>
        <p>center</p>
    </p>
    <p class="right" style="background-color: lightgreen;">
        <p>right</p>
    </p>
</p>

js　　

当子元素高度不同时，进行js判断，增加较低子元素的padding-bottom，使得各个子元素实现等高效果

CSS Code复制内容到剪贴板

<style>   
body,p{margin: 0;}   
.parent{overflow: hidden;}   
.left,.center,.rightright{   
    float: left;   
    width: 25%;   
}       
.center{   
    width: 50%;   
    padding: 0 20px;   
    background-clip: content-box;   
    box-sizing: border-box;   
}   
</style>

XML/HTML Code复制内容到剪贴板

<p class="parent" id="parent" style="background-color: lightgrey;">
    <p class="left" style="background-color: lightblue;">
        <p>left</p>
    </p>
    <p class="center" style="background-color: pink;">
        <p>center</p>
        <p>center</p>
    </p>
    <p class="right" style="background-color: lightgreen;">
        <p>right</p>
    </p>
</p>

JavaScript Code复制内容到剪贴板

<script>   
function getCSS(obj,style){   
    if(window.getComputedStyle){   
        return getComputedStyle(obj)[style];   
    }   
    return obj.currentStyle[style];   
}   
var oParent = document.getElementById(&#39;parent&#39;);   
var oLeft = oParent.getElementsByTagName(&#39;p&#39;)[0];   
var oCenter = oParent.getElementsByTagName(&#39;p&#39;)[1];   
var oRight = oParent.getElementsByTagName(&#39;p&#39;)[2];   
function eqHeight(obj1,obj2){   
    var oDis = obj1.clientHeight - obj2.clientHeight;   
    if(oDis > 0){   
        obj2.style.paddingBottom = parseFloat(getCSS(obj2,&#39;padding-bottom&#39;)) + oDis + &#39;px&#39;;   
    }else{   
        obj1.style.paddingBottom = parseFloat(getCSS(obj1,&#39;padding-bottom&#39;)) +  Math.abs(oDis) + &#39;px&#39;;   
    }   
}   
eqHeight(oLeft,oCenter);   
eqHeight(oLeft,oRight);   
</script>

以上这篇浅析CSS等高布局的6种方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。

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!