× 目录 [1]float [2]inline-block [3]table [4]flex
前面的话
等分布局是指子元素平均分配父元素宽度的布局方式，本文将介绍实现等分布局的4种方式
思路一: float
缺点:结构和样式存在耦合性，IE7-浏览器下对宽度百分比取值存在四舍五入的误差
【1】float + padding + background-clip
使用padding来实现子元素之间的间距，使用background-clip使子元素padding部分不显示背景
<style>body,p{margin: 0;}.parentWrap{ overflow: hidden;}.parent{ margin-right: -20px; overflow: hidden;}.child{ float: left; height: 100px; width: 25%; padding-right: 20px; box-sizing: border-box; background-clip: content-box;}</style>
<div class="parentWrap"> <div class="parent" style="background-color: lightgrey;"> <div class="child" style="background-color: lightblue;">1</div> <div class="child" style="background-color: lightgreen;">2</div> <div class="child" style="background-color: lightsalmon;">3</div> <div class="child" style="background-color: pink;">4</div> </div> </div>
【2】float + margin + calc
使用margin实现子元素之间的间距，使用calc()函数计算子元素的宽度
<style>body,p{margin: 0;}.parentWrap{ overflow: hidden;}.parent{ overflow: hidden; margin-right: -20px;}.child{ float: left; height: 100px; width: calc(25% - 20px); margin-right: 20px;}</style>
<div class="parentWrap"> <div class="parent" style="background-color: lightgrey;"> <div class="child" style="background-color: lightblue;">1</div> <div class="child" style="background-color: lightgreen;">2</div> <div class="child" style="background-color: lightsalmon;">3</div> <div class="child" style="background-color: pink;">4</div> </div> </div>
【3】float + margin + (fix)
使用margin实现子元素之间的间距，通过增加结构来实现兼容
<style>body,p{margin: 0;}.parentWrap{ overflow: hidden;}.parent{ overflow: hidden; margin-right: -20px;}.child{ float: left; width: 25%;}.in{ margin-right: 20px; height: 100px;}</style>
<div class="parentWrap"> <div class="parent" style="background-color: lightgrey;"> <div class="child" style="background-color: blue;"> <div class="in" style="background-color: lightblue;">1</div> </div> <div class="child" style="background-color: green;"> <div class="in" style="background-color: lightgreen;">2</div> </div> <div class="child" style="background-color: orange;"> <div class="in" style="background-color: lightsalmon;">3</div> </div> <div class="child" style="background-color: red;"> <div class="in" style="background-color: pink;">4</div> </div> </div> </div>
思路二: inline-block
缺点：需要设置垂直对齐方式vertical-align，则需要处理换行符解析成空格的间隙问题。IE7-浏览器不支持给块级元素设置inline-block属性，兼容代码是display:inline;zoom:1;
【1】inline-block + padding + background-clip
<style>body,p{margin: 0;}.parentWrap{ overflow: hidden;}.parent{ font-size: 0; margin-right: -20px; overflow: hidden;}.child{ display:inline-block; vertical-align: top; width: 25%; padding-right: 20px; box-sizing: border-box; background-clip: content-box; font-size: 16px;}</style>
<div class="parentWrap"> <div class="parent" style="background-color: lightgrey;"> <div class="child" style="background-color: lightblue;">1</div> <div class="child" style="background-color: lightgreen;">2</div> <div class="child" style="background-color: lightsalmon;">3</div> <div class="child" style="background-color: pink;">4</div> </div> </div>
【2】inline-block + margin + calc
<style>body,p{margin: 0;}.parentWrap{ overflow: hidden;}.parent{ margin-right: -20px; font-size: 0;}.child{ display: inline-block; vertical-align: top; font-size: 16px; height: 100px; width: calc(25% - 20px); margin-right: 20px;}</style>
<div class="parentWrap"> <div class="parent" style="background-color: lightgrey;"> <div class="child" style="background-color: lightblue;">1</div> <div class="child" style="background-color: lightgreen;">2</div> <div class="child" style="background-color: lightsalmon;">3</div> <div class="child" style="background-color: pink;">4</div> </div> </div>
【3】inline-block + margin + (fix)
<style>body,p{margin: 0;}.parentWrap{ overflow: hidden;}.parent{ margin-right: -20px; font-size: 0;}.child{ display: inline-block; vertical-align: top; font-size: 16px; width: 25%;}.in{ margin-right: 20px; height: 100px;}</style>
<div class="parentWrap"> <div class="parent" style="background-color: lightgrey;"> <div class="child" style="background-color: blue;"> <div class="in" style="background-color: lightblue;">1</div> </div> <div class="child" style="background-color: green;"> <div class="in" style="background-color: lightgreen;">2</div> </div> <div class="child" style="background-color: orange;"> <div class="in" style="background-color: lightsalmon;">3</div> </div> <div class="child" style="background-color: red;"> <div class="in" style="background-color: pink;">4</div> </div> </div> </div>
思路三: table
缺点：元素被设置为table后，内容撑开宽度。若要兼容IE7-浏览器，需要改为
＆gt; gt;的目的是什麼 元素？Mar 21, 2025 pm 12:34 PM本文討論了HTML＆lt; Progress＆gt;元素，其目的，樣式和與＆lt; meter＆gt;元素。主要重點是使用＆lt; progress＆gt;為了完成任務和LT;儀表＆gt;對於stati
＆lt; datalist＆gt;的目的是什麼。 元素？Mar 21, 2025 pm 12:33 PM本文討論了html＆lt; datalist＆gt;元素，通過提供自動完整建議，改善用戶體驗並減少錯誤來增強表格。Character計數：159
＆lt; meter＆gt;的目的是什麼。 元素？Mar 21, 2025 pm 12:35 PM本文討論了HTML＆lt; meter＆gt;元素，用於在一個範圍內顯示標量或分數值及其在Web開發中的常見應用。它區分了＆lt; meter＆gt;從＆lt; progress＆gt;和前
視口元標籤是什麼？為什麼對響應式設計很重要？Mar 20, 2025 pm 05:56 PM本文討論了視口元標籤，這對於移動設備上的響應式Web設計至關重要。它解釋瞭如何正確使用確保最佳的內容縮放和用戶交互，而濫用可能會導致設計和可訪問性問題。
如何使用HTML5表單驗證屬性來驗證用戶輸入？Mar 17, 2025 pm 12:27 PM本文討論了使用HTML5表單驗證屬性，例如必需的，圖案，最小，最大和長度限制，以直接在瀏覽器中驗證用戶輸入。
我如何使用html5＆lt; time＆gt; 元素以語義表示日期和時間？Mar 12, 2025 pm 04:05 PM本文解釋了HTML5＆lt; time＆gt;語義日期/時間表示的元素。 它強調了DateTime屬性對機器可讀性（ISO 8601格式）的重要性，並在人類可讀文本旁邊，增強Accessibilit
＆lt; iframe＆gt;的目的是什麼。 標籤？使用時的安全考慮是什麼？Mar 20, 2025 pm 06:05 PM本文討論了＆lt; iframe＆gt;將外部內容嵌入網頁，其常見用途，安全風險以及諸如對象標籤和API等替代方案的目的。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
