Heim > Artikel > Web-Frontend > Einführung in 6 Möglichkeiten des CSS-Layouts mit gleicher Höhe
Einführung in 6 Möglichkeiten des CSS-Layouts mit gleicher Höhe
- 高洛峰Original
- 2017-03-13 17:49:311436Durchsuche
Der folgende Editor bietet Ihnen eine Einführung in 6 Möglichkeiten des CSS-Layouts gleicher Höhe. Der Herausgeber findet es ziemlich gut, daher möchte ich es jetzt mit Ihnen teilen und als Referenz dienen. Folgen wir dem Editor, um einen Blick darauf zu werfen.
Wie bereits erwähnt, bezieht sich
auf eine Layoutmethode, bei der die Höhen der untergeordneten Elemente im übergeordneten Element gleich sind. Die Implementierung des Layouts mit gleicher Höhe umfasst pseudogleiche Höhe und echte gleiche Höhe. Pseudogleiche Höhe sieht nur wie gleiche Höhe aus, während echte gleiche Höhe die tatsächliche gleiche Höhe ist. In diesem Artikel werden Randsimulation, negativer Margin, zwei Pseudokonturen sowie Tabellenimplementierung, absolute Implementierung, Flex-Implementierung und js zur Bestimmung der vier wahren Konturlayouts
vorgestelltPseudokontur
Randsimulation
Denn Elementrand und Elementhöhe sind immer gleich hoch , verwenden Sie die Randfarbe des Elements, um die Hintergrundfarbe der linken und rechten Geschwisterelemente zu verschleiern. Verwenden Sie dann „Absolut“, um die linken und rechten Elemente mit einem transparenten Hintergrund am linken und rechten Rand des mittleren Elements abzudecken, um einen visuellen Effekt gleicher Höhe zu erzielen.
[Hinweis] Die Höhe der Elemente auf der linken und rechten Seite darf nicht größer sein als die Höhe des mittleren Elements, andernfalls wird die Höhe des offenen Containers nicht unterstützt
CSS-CodeInhalt in die Zwischenablage kopieren
<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>XML/HTML-CodeInhalt in die Zwischenablage kopieren
<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>
Negativer Rand
Da der Hintergrund im Füllbereich angezeigt wird, Legen Sie einen großen Wert für padding-bottom fest. Legen Sie dann einen negativen margin-bottom mit demselben Wert fest, sodass die Hintergrundfarbe den Elementbereich abdeckt und der Berechnungsformel des Elements entspricht Box-Modell, um einen visuellen Effekt gleicher Höhe zu erzielen
[Hinweis] Wenn die Seite einen Ankerpunkt zum Springen verwendet, wird ein Teil der Textinformationen angezeigt ausgeblendet
[Hinweis] Wenn das Hintergrundbild auf der Seite am Ende positioniert ist, können Sie das Hintergrundbild nicht sehen
CSS-CodeInhalt in die Zwischenablage kopieren
<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>XML/HTML-CodeInhalt in die Zwischenablage kopieren
<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>
Echte gleiche Höhe
Tabelle
Tabellenelement Das Tabellenzellenelement hat standardmäßig gleiche Höhen
CSS-CodeInhalt in die Zwischenablage kopieren
<style>
body,p{margin: 0;}
.parent{
display: table;
width: 100%;
table-layout: fixed;
}
.left,.centerWrap,.rightright{
display: table-cell;
}
.center{
margin: 0 20px;
}
</style>XML/HTML-CodeInhalt in die Zwischenablage kopieren
<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>
absolut
Stellen Sie den oberen Bereich:0;unten:0; des untergeordneten Elements so ein, dass die Höhe aller untergeordneten Elemente mit der Höhe des übergeordneten Elements übereinstimmt, wodurch ein gleicher Höheneffekt erzielt wird
CSS-CodeInhalt in die Zwischenablage kopieren
<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>
XML/HTML-Code Inhalt in die Zwischenablage kopieren
<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
Die skalierbaren Elemente in Flex werden standardmäßig auf die Höhe des übergeordneten Elements gestreckt und die Es wird auch ein gleichmäßiger Höheneffekt erzielt
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('parent');
var oLeft = oParent.getElementsByTagName('p')[0];
var oCenter = oParent.getElementsByTagName('p')[1];
var oRight = oParent.getElementsByTagName('p')[2];
function eqHeight(obj1,obj2){
var oDis = obj1.clientHeight - obj2.clientHeight;
if(oDis > 0){
obj2.style.paddingBottom = parseFloat(getCSS(obj2,'padding-bottom')) + oDis + 'px';
}else{
obj1.style.paddingBottom = parseFloat(getCSS(obj1,'padding-bottom')) + Math.abs(oDis) + 'px';
}
}
eqHeight(oLeft,oCenter);
eqHeight(oLeft,oRight);
</script>
以上这篇浅析CSS等高布局的6种方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。
Das obige ist der detaillierte Inhalt vonEinführung in 6 Möglichkeiten des CSS-Layouts mit gleicher Höhe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!