2013.04.01

讓 float 的 div 高度相同

文章索引

今天同事問我要怎麼讓 float 的 DIV 可以有相同高度？

亦即，即使左邊的 DIV 文字行數比較少，也會因為右邊 DIV 的行數變多而調整自己的高度。

上網搜尋研究了一下，其實有好多種方式可以滿足這個條件，甚至二欄、三欄部落格也有用類似的概念。

利用 padding 的填充與 margin 的消除

#container {
  overflow: hidden;
  width: 100%;
  color: #000;
}

#left-col {
  float: left;
  width: 50%;
  background-color: #eee;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

#right-col {
  float: left;
  width: 50%;
  margin-right: -1px; /* For IE */
  background-color: #369;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

使用 display:table ，讓 div 變成 table

#container {
  overflow: hidden;
  display:table;
  width: 100%;
  color: #000;
}

.row {display:table-row;}
.row div {display: table-cell;}

延伸閱讀與理論

要解掉同高還有很多方法，有興趣的朋友可以瞭解其他人是如何解決這樣的問題，他們也大方地分享自己的理論以及實際運用的效果：

4 Methods For Creating Equal Height Columns In CSS / vanseo design
Fluid Width Equal Height Columns / CSS tricks

歡迎給我點鼓勵，讓我知道你來過：）

更多 CSS 相關文章

如何讓使用 CDN 的 Tailwind CSS 也能在 VS Code 啟用 Tailwind CSS Intellisense 套件

2023-12-06

如何讓使用 CDN 的 Tailwind CSS 也能在 VS Code 啟用 Tailwind CSS Intellisense 套件

HTML/CSS

vw 進化了！更好用的 CSS 自適應字體大小

2023-10-13

vw 進化了！更好用的 CSS 自適應字體大小

HTML/CSS

CSS 表單樣式分享：Material UI 的 Label 標籤浮動縮放

2023-09-13

CSS 表單樣式分享：Material UI 的 Label 標籤浮動縮放

HTML/CSS

透過 img object-fit 屬性取代 CSS 的 background 語法，輕鬆實現圖片背景的效果

2023-06-26

透過 img object-fit 屬性取代 CSS 的 background 語法，輕鬆實現圖片背景的效果

HTML/CSS

用 CSS 製作垂直滾動的跑馬燈

2023-04-13

用 CSS 製作垂直滾動的跑馬燈

HTML/CSS

整合 TailwindCSS 與 Element Plus 的 CSS class 變數

2022-11-22

整合 TailwindCSS 與 Element Plus 的 CSS class 變數

HTML/CSS

0 則留言

Inline Feedbacks

View all comments

粉絲團

整合 TailwindCSS 與 Element Plus 的 CSS class 變數

Tags: Element Plus, element ui, TailwindCSS
原生 CSS 的預處理器：Myth 介紹與使用

Tags: css 語法, 實作, 預處理器
強烈推薦收藏好物 – CSS Specificity (CSS 權重一覽)

Tags: css 權重, 觀念, 資源
CSS 表單樣式分享：Material UI 的 Label 標籤浮動縮放

Tags: css 語法
使用 HTML5 和 jQuery 簡易存取資料

Tags: HTML5, 技巧, 觀念
從 CSS sprite 進化到 SVG sprite

Tags: css 語法, sprite, SVG, 原創, 教學, 觀念
用 data-* 屬性做出純 CSS 的 tooltip

Tags: css 語法, HTML5, 實作, 教學
淺談 section 運用以及與 outline 間的關聯

Tags: HTML5, 原創, 教學, 觀念

贊助廣告