cari
Rumahhujung hadapan webhtml tutorialCSS等高布局的6种方式_html/css_WEB-ITnose

× 目录 [1]边框模拟 [2]负margin [3]table [4]absolute [5]flex [6]js

前面的话

  等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高。本文将介绍边框模拟、负margin这两种伪等高以及table实现、absolute实现、flex实现和js判断这四种真等高布局

 

伪等高

边框模拟

  因为元素边框和元素高度始终是相同高度,用元素的边框颜色来伪装左右两个兄弟元素的背景色。然后将左右两个透明背景的元素使用absolute覆盖在中间元素的左右边框上,实现视觉上的等高效果

  [注意]左右两侧元素的内容高度不能大于中间元素内容高度,否则无法撑开容器高度

<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;}.right{    position: absolute;    top: 0;    right: 0;    width: 300px;}</style>

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

 

负margin

  因为背景是在padding区域显示的,设置一个大数值的padding-bottom,再设置相同数值的负的margin-bottom,使背景色铺满元素区域,又符合元素的盒模型的计算公式,实现视觉上的等高效果

  [注意]如果页面中使用锚点跳转时,将会隐藏部分文字信息

  [注意]如果页面中的背景图片定位到底部,将会看不到背景图片

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

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

 

真等高

table

  table元素中的table-cell元素默认就是等高的

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

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

 

absolute

  设置子元素的top:0;bottom:0;使得所有子元素的高度都和父元素的高度相同,实现等高效果

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

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

 

flex

  flex中的伸缩项目默认都拉伸为父元素的高度,也实现了等高效果

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

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

 

js

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

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

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

<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('div')[0];var oCenter = oParent.getElementsByTagName('div')[1];var oRight = oParent.getElementsByTagName('div')[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>

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Apakah tag penutup diri? Beri contoh.Apakah tag penutup diri? Beri contoh.Apr 27, 2025 am 12:04 AM

Self-closingtagsinhtmlandxmlaretagsthatclosethem sendiriwithoutneedingaseparateClosingtag, smadriflifymarkupstructureandenhancingcodingeficiency.1) theareessentialinxmlforelementSwithoutContent, Memastikan-pembentukan-pembentukan

Beyond HTML: Teknologi Penting untuk Pembangunan WebBeyond HTML: Teknologi Penting untuk Pembangunan WebApr 26, 2025 am 12:04 AM

Untuk membina laman web dengan fungsi yang kuat dan pengalaman pengguna yang baik, HTML sahaja tidak mencukupi. Teknologi berikut juga diperlukan: JavaScript memberikan laman web dinamik dan interaktif, dan perubahan masa nyata dicapai dengan mengendalikan DOM. CSS bertanggungjawab untuk gaya dan susun atur laman web untuk meningkatkan estetika dan pengalaman pengguna. Rangka kerja moden dan perpustakaan seperti React, Vue.js dan sudut meningkatkan kecekapan pembangunan dan struktur organisasi kod.

Apakah atribut Boolean dalam HTML? Beri beberapa contoh.Apakah atribut Boolean dalam HTML? Beri beberapa contoh.Apr 25, 2025 am 12:01 AM

Atribut Boolean adalah atribut khas dalam HTML yang diaktifkan tanpa nilai. 1. Atribut Boolean mengawal tingkah laku elemen dengan sama ada ia wujud atau tidak, seperti dilumpuhkan melumpuhkan kotak input. 2. Prinsip kerja mereka adalah untuk mengubah tingkah laku elemen mengikut kewujudan atribut apabila penyemak imbas. 3. Penggunaan asas adalah untuk menambah atribut secara langsung, dan penggunaan lanjutan dapat dikawal secara dinamik melalui JavaScript. 4. Kesalahan umum adalah tersilap berfikir bahawa nilai -nilai perlu ditetapkan, dan kaedah penulisan yang betul harus ringkas. 5. Amalan terbaik adalah untuk memastikan kod ringkas dan menggunakan sifat Boolean dengan munasabah untuk mengoptimumkan prestasi laman web dan pengalaman pengguna.

Bagaimana anda boleh mengesahkan kod HTML anda?Bagaimana anda boleh mengesahkan kod HTML anda?Apr 24, 2025 am 12:04 AM

Kod HTML boleh menjadi bersih dengan pengesahan dalam talian, alat bersepadu dan proses automatik. 1) Gunakan W3CMarkupValidationService untuk mengesahkan kod HTML dalam talian. 2) Pasang dan konfigurasikan sambungan HTMLHINT dalam visualStudiocode untuk pengesahan masa nyata. 3) Gunakan HTMLTidy untuk mengesahkan dan membersihkan fail HTML secara automatik dalam proses pembinaan.

HTML vs CSS dan JavaScript: Membandingkan Teknologi WebHTML vs CSS dan JavaScript: Membandingkan Teknologi WebApr 23, 2025 am 12:05 AM

HTML, CSS dan JavaScript adalah teknologi teras untuk membina laman web moden: 1. HTML mentakrifkan struktur laman web, 2. CSS bertanggungjawab untuk kemunculan laman web, 3.

Html sebagai bahasa markup: fungsinya dan tujuannyaHtml sebagai bahasa markup: fungsinya dan tujuannyaApr 22, 2025 am 12:02 AM

Fungsi HTML adalah untuk menentukan struktur dan kandungan laman web, dan tujuannya adalah untuk menyediakan cara yang standard untuk memaparkan maklumat. 1) HTML menganjurkan pelbagai bahagian laman web melalui tag dan atribut, seperti tajuk dan perenggan. 2) Ia menyokong pemisahan kandungan dan prestasi dan meningkatkan kecekapan penyelenggaraan. 3) HTML adalah diperpanjang, membolehkan tag tersuai untuk meningkatkan SEO.

Masa Depan HTML, CSS, dan JavaScript: Trend Pembangunan WebMasa Depan HTML, CSS, dan JavaScript: Trend Pembangunan WebApr 19, 2025 am 12:02 AM

Trend masa depan HTML adalah semantik dan komponen web, trend masa depan CSS adalah CSS-in-JS dan CSShoudini, dan trend masa depan JavaScript adalah webassembly dan tanpa pelayan. 1. Semantik HTML meningkatkan kebolehcapaian dan kesan SEO, dan komponen web meningkatkan kecekapan pembangunan, tetapi perhatian harus dibayar kepada keserasian penyemak imbas. 2. CSS-in-JS meningkatkan fleksibiliti pengurusan gaya tetapi boleh meningkatkan saiz fail. Csshoudini membolehkan operasi langsung rendering CSS. 3.Webassembly mengoptimumkan prestasi aplikasi penyemak imbas tetapi mempunyai keluk pembelajaran yang curam, dan tanpa pelayan memudahkan pembangunan tetapi memerlukan pengoptimuman masalah permulaan sejuk.

HTML: Struktur, CSS: Gaya, JavaScript: Tingkah LakuHTML: Struktur, CSS: Gaya, JavaScript: Tingkah LakuApr 18, 2025 am 12:09 AM

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: 1. HTML mentakrifkan struktur laman web, 2. CSS mengawal gaya laman web, dan 3. JavaScript menambah tingkah laku dinamik. Bersama -sama, mereka membina kerangka, estetika dan interaktiviti laman web moden.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

SublimeText3 Linux versi baharu

SublimeText3 Linux versi baharu

SublimeText3 Linux versi terkini

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

VSCode Windows 64-bit Muat Turun

VSCode Windows 64-bit Muat Turun

Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Persekitaran pembangunan bersepadu PHP yang berkuasa

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan