HTML 元素並排

今天研討一個議題

要怎麼讓兩個 div 在一個 div 裡面並排？

嗯.. 看似簡單的題目，但其實在切版的時候大家常常會弄半天不知所以然ＸＤ

首先，先這個 HTML 例子：

<div class='box'>
  <div class='a'>This is A</div>
  <div class='b'>This is B</div>
</div>

然後 css 寫這樣：

.box {
  border: 1px solid red;
  width: 300px;
}
.a, .b {
  display: inline-block;
  width: 100px;
  height: 50px;
  border: 1px solid red;
}

如此就可以產生 一個 div 裡面有兩個 div 的結果了！

很好！問題來了.. 看下圖.. 你會看到為何中間會有空隙！！！！

聰明的大大們一定會立馬做不同的更改

例如 box 的 font-size 改成 0，a、b 再加入 font-size 改回 13px?

.box {
  border: 1px solid red;
  width: 300px;
  font-size: 0;}
.a, .b {
  display: inline-block;
  width: 100px;
  height: 50px;
  border: 1px solid red;
  font-size: 13px;}

嗯.. 看來似乎成功了！？

但可能要跟你說一下，這不是好方法喲 ^^，原因是可能不同瀏覽器就不吃這套了！

所以再想另外一個方法吧！！

那.. 如果將 HTML 做更改呢？ 把 a、b 之間的空隙縮掉？

<div class='box'>
  <div class='a'>This is A</div><div class='b'>This is B</div></div>

css 不更動試試看

.box {
  border: 1px solid red;
  width: 300px;
}
.a, .b {
  display: inline-block;
  width: 100px;
  height: 50px;
  border: 1px solid red;
}

嗯.. 看似又成功了！！！？

由於以上幾個測試可以知道，看來中間並排會有空格..

應該是 HTML 兩個 div 間的空白處造成的影響..

所以用 font-size、縮排元素 可以解決!

但！！！ 還是不是一個很好的解法，因為 你把兩個 div a、b 縮在一起..

你知道的，後端工程師在套版一定會.. !@#%T#^%$ 的 ^^

所以不是很好的解法！ 再想！

於是你會在網路上 Google，然後找到一個辦法，就是 float 的用法

於是我們將 a、b 元素加入 float: left; 試試看！

<div class='box'>
  <div class='a'>This is A</div>
  <div class='b'>This is B</div>
</div>

.box {
  border: 1px solid red;
  width: 300px;
}
.a, .b {
  display: inline-block;
  width: 100px;
  height: 50px;
  border: 1px solid red;
  float: left;}

結果呢！？

嗯.. 是並排了.. 但是我的 box 怎麼縮成一條線了呢！！？＝口＝a

不過聰明的攻城獅一定不會被打敗，肯定會把 box 加入 height: 50px; 來解決這問題！

.box {
  border: 1px solid red;
  width: 300px;
  height: 50px;}

嗯.. 高度好像不大對，還要計算 border 的上下寬度，應該要寫成

.box {
  border: 1px solid red;
  width: 300px;
  height: 52px; // 50px + 1 * 2px}

太好了！！ 完成了！！

原本以為開開心心準備下班的你，突然得知..

天殺的設計竟然天真地跑來跟你說.. 那個 a 的高度要調成 70px..

你也開開心心地將 a 的 height 調成了 70px

.box {
  border: 1px solid red;
  width: 300px;
  height: 52px; // 50px + 1 * 2px}
.a, .b {
  display: inline-block;
  width: 100px;
  height: 50px;
  border: 1px solid red;
  float: left;
}
.a {
  height: 70px;}

嗯...

a 長高了，所以 box 又要跟著調整成 72px...

你會發現 box 都要隨內部元素的條件去變更 css

還要去注意上下 border、padding .. 等..

除非你本身是數學系的或者很會計算，要不然這絕對不是一個好招數！

於是認真的小獅子又去 Google..

你會找到一個方法就是在 box 元素的 css 做一些變更

.box {
  border: 1px solid red;
  width: 300px;
  *zoom: 1;}.box:after {
  content: "";
  display: table;
  line-height: 0;
  clear: both;
}

於是可以發現...

疑！！！ 完成了！！！

那是著把 a 的 height 改更高呢？？

.box {
  border: 1px solid red;
  width: 300px;
  *zoom: 1;
}
.box:after {
  content: "";
  display: table;
  line-height: 0;
  clear: both;
}
.a, .b {
  display: inline-block;
  width: 100px;
  height: 50px;
  border: 1px solid red;
  float: left;
}
.a {
  height: 100px;}

沒錯！

這就是目前坊間最常看到解決元素 float 造成父層元素抓不到子元素高度

並排所造成的問題！

但其實可以進階的修改，就是提取出關鍵的語法，寫在新的 class

如下：

.clearfix {
  *zoom: 1;
}
.clearfix:after {
  content: "";
  display: table;
  line-height: 0;
  clear: both;
}
.box {
  border: 1px solid red;
  width: 300px;
}
.a, .b {
  display: inline-block;
  width: 100px;
  height: 50px;
  border: 1px solid red;
  float: left;
}
.a {
  height: 100px;
}

在 box 的 div 上再加入 clearfix

<div class='box clearfix'>
  <div class='a'>This is A</div>
  <div class='b'>This is B</div>
</div>

如此一來，不僅在 box 這個元素上使用

其他有類似情況的元素，只要加上 clearfix 之後

裡面的 float 子元素再也逃不過你的手掌心啦！！

如果要進階運用其實還可以搭配 css 的 calc 的使用！

那對於 RWD 切版，可以有更靈活使用喔！

關於這點，各位可以參考這篇 - CSS 的 calc