今天研討一個議題要怎麼讓兩個div 在一個div 裡面並排？ 嗯.. 看似簡單的題目，但其實在切版的時候大家常常會弄半天不知所以然XD 首先，先這個HTML ...
今天研討一個議題要怎麼讓兩個div在一個div裡面並排？嗯..看似簡單的題目，但其實在切版的時候大家常常會弄半天不知所以然ＸＤ首先，先這個HTML例子：
ThisisA
ThisisB
然後css寫這樣：.box{
border:1pxsolidred;
width:300px;
}
.a,.b{
display:inline-block;
width:100px;
height:50px;
border:1pxsolidred;
} 如此就可以產生一個div裡面有兩個div的結果了！很好！問題來了..看下圖..你會看到為何中間會有空隙！！！！聰明的大大們一定會立馬做不同的更改例如box的font-size改成0，a、b再加入font-size改回13px?.box{
border:1pxsolidred;
width:300px;
font-size:0;}
.a,.b{
display:inline-block;
width:100px;
height:50px;
border:1pxsolidred;
font-size:13px;} 嗯..看來似乎成功了！？ 但可能要跟你說一下，這不是好方法喲^^，原因是可能不同瀏覽器就不吃這套了！所以再想另外一個方法吧！！那..如果將HTML做更改呢？把a、b之間的空隙縮掉？
ThisisAThisisB css不更動試試看.box{
border:1pxsolidred;
width:300px;
}
.a,.b{
display:inline-block;
width:100px;
height:50px;
border:1pxsolidred;
}嗯..看似又成功了！！！？ 由於以上幾個測試可以知道，看來中間並排會有空格..應該是HTML兩個div間的空白處造成的影響..所以用font-size、縮排元素可以解決! 但！！！還是不是一個很好的解法，因為你把兩個diva、b縮在一起..你知道的，後端工程師在套版一定會..!@#%T#^%$的^^所以不是很好的解法！再想！ 於是你會在網路上Google，然後找到一個辦法，就是float的用法於是我們將a、b元素加入float:left;試試看！
ThisisA
ThisisB
.box{
border:1pxsolidred;
width:300px;
}
.a,.b{
display:inline-block;
width:100px;
height:50px;
border:1pxsolidred;
float:left;} 結果呢！？ 嗯..是並排了..但是我的box怎麼縮成一條線了呢！！？＝口＝a不過聰明的攻城獅一定不會被打敗，肯定會把box加入height:50px;來解決這問題！.box{
border:1pxsolidred;
width:300px;
height:50px;} 嗯..高度好像不大對，還要計算border的上下寬度，應該要寫成.box{
border:1pxsolidred;
width:300px;
height:52px;//50px+1*2px} 太好了！！完成了！！原本以為開開心心準備下班的你，突然得知..天殺的設計竟然天真地跑來跟你說..那個a的高度要調成70px..你也開開心心地將a的height調成了70px.box{
border:1pxsolidred;
width:300px;
height:52px;//50px+1*2px}
.a,.b{
display:inline-block;
width:100px;
height:50px;
border:1pxsolidred;
float:left;
}
.a{
height:70px;} 嗯... a長高了，所以box又要跟著調整成72px...你會發現box都要隨內部元素的條件去變更css還要去注意上下border、padding..等..除非你本身是數學系的或者很會計算，要不然這絕對不是一個好招數！ 於是認真的小獅子又去Google..你會找到一個方法就是在box元素的css做一些變更.box{
border:1pxsolidred;
width:300px;
*zoom:1;}.box:after{
content:"";
display:table;
line-height:0;
clear:both;
} 於是可以發現... 疑！！！完成了！！！那是著把a的height改更高呢？？.box{
border:1pxsolidred;
width:300px;
*zoom:1;
}
.box:after{
content:"";
display:table;
line-height:0;
clear:both;
}
.a,.b{
display:inline-block;
width:100px;
height:50px;
border:1pxsolidred;
float:left;
}
.a{
height:100px;}沒錯！ 這就是目前坊間最常看到解決元素float造成父層元素抓不到子元素高度並排所造成的問題！但其實可以進階的修改，就是提取出關鍵的語法，寫在新的class如下：.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
line-height:0;
clear:both;
}
.box{
border:1pxsolidred;
width:300px;
}
.a,.b{
display:inline-block;
width:100px;
height:50px;
border:1pxsolidred;
float:left;
}
.a{
height:100px;
} 在box的div上再加入clearfix
ThisisA
ThisisB
如此一來，不僅在box這個元素上使用其他有類似情況的元素，只要加上clearfix之後裡面的float子元素再也逃不過你的手掌心啦！！ 如果要進階運用其實還可以搭配css的calc的使用！那對於RWD切版，可以有更靈活使用喔！關於這點，各位可以參考這篇-CSS的calcCSSHTML切版技術前端clearfix密技http://zh-tw.learnlayout.com/clearfix.htmlstackoverflowhttp://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best標籤分類開箱文3C科技藍芽遊戲Nintendo攝影穩定器三軸穩定器JavaScript前端ChromeDebugAppleMacOSOSX後端伺服器RubyonRailsMySQL運動GoProPORTER包包Plantronics耳機Google技術應用ubuntuAWSPHPCodeIgniterApache鋼筆SAILORLAMYAURORAHTMLPHPActiveRecordCSS切版技術觀念題C語言RWD勵志感觸期許閒聊熱門文章MacOS上安裝MySQL以及相關設定筆記飛宇SPGLive360°三軸手機穩定器開箱文HTML元素並排把Google試算表當資料庫，並取得API實作心得PORTERTANKER3WAY開箱文最新文章NintendoSwitch開箱文飛宇SPGLive360°三軸手機穩定器開箱文JavaScript物件JavaScript陣列JavaScript迴圈宙思設計知識文章HTML元素並排
