知識文章HTML 元素並排

HTML 元素並排

今天研討一個議題

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

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

首先,先這個 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 的結果了!

HTML 元素並排 - 宙思設計


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

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

例如 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 元素並排 - 宙思設計

 

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

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

那.. 如果將 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 元素並排 - 宙思設計

 

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

應該是 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;}

 

結果呢!?

HTML 元素並排 - 宙思設計

 

嗯.. 是並排了.. 但是我的 box 怎麼縮成一條線了呢!!?=口=a

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

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

HTML 元素並排 - 宙思設計

 

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

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

 

太好了!! 完成了!!

HTML 元素並排 - 宙思設計


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

天殺的設計竟然天真地跑來跟你說.. 那個 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;}

 

嗯...

HTML 元素並排 - 宙思設計

 

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;
}

 

於是可以發現...

HTML 元素並排 - 宙思設計

 

疑!!! 完成了!!!

那是著把 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;}


沒錯!

HTML 元素並排 - 宙思設計

 

這就是目前坊間最常看到解決元素 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

張貼者:吳政賢發佈。
瀏覽人數:378 人