html 中 div 盒子並排展示
摘要：
在專案中，遇到一個前端問題，覺得小問題就別去找前端工程師解決了，還是自己動動手吧。
相信不管小問題，大問題 都應該先自己嘗試解決，google 、度娘查查資料，這絕對是增加理解和記憶的好機會。
##問題描述：
將兩個img圖片 並排展示
解決思路如下：
1、先畫一個盒子 d...
在專案中，遇到一個前端問題，覺得小問題就別去找前端工程師解決了，還是自己動動手吧。
相信不管小問題，大問題 都應該先自己嘗試解決，google 、度娘查查資料，這絕對是增加理解和記憶的好機會。
##問題描述：
將兩個img圖片 並排展示
解決思路如下：
1、先畫一個盒子 div ，在頁面中規劃出展示內容的區域位置(ps：width、height 這兩個是必要的)，如果需要水平居中於瀏覽器、推薦使用樣式即可。（ps：這樣可使瀏覽器更加相容）
例如：
1 .div-levelCenter{
2margin:0 auto;
3width:525px;
4height:300px;
5/* border:1px solid #F00; 能標記出在頁面中的位置和區域 */
6 }
效果如下（ps：為了能更清楚看見盒子的位置及內容區域，用紅色邊框標記）
2、在這個盒子裡，再規劃出兩個div盒子，這兩盒子是用來放圖片內容的，盒子大小是根據盒子裡的內容來決定的，只要設定兩個圖片的width、height即可。（ps：這兩個盒子要並排展示）
1 .div-levelCenter .img-div {
2display:inline;
3float:left;
4padding:5px;
5border:1px solid #009A61;
6 }
效果如下（ps：為了能更清楚看見盒子的位置及內容區域，用綠色邊框標記）
3、這兩個綠色邊框盒子就是用來放圖片內容的，設定圖片width、height在最外層div盒子尺寸內
1 .div-levelCenter .img-div .img-div-imgSize {
2width:250px;
3height:250px;
4
5 }
效果如下（ps：直接使用黑、綠背景色來充當圖片）
黑色、綠色背景就是圖片展示的內容區域。
整體html 及 css 程式碼如下：
1 <!DOCTYPE HTML> 2 <html> 3 4 <head> 5 6 <style type="text/css"> 7 8 .div-levelCenter{ 9margin:0 auto; 10width:525px; 11height:300px; 12border:1px solid #F00; /*能標記出在頁面中的位置和區域 */ 13} 14 15 .div-levelCenter .img-div { 16display:inline; 17float:left; 18padding:5px; 19border:1px solid #009A61; 20 } 21 22 .div-levelCenter .img-div .img-div-imgSize { 23width:250px; 24height:250px; 25 26 } 27 28 </style> 29 </head> 30 31 <body> 32 33 <div class="div-levelCenter"> 34<div class="img-div"> 35<img class="img-div-imgSize" style="background-color: #000"/> 36</div> 37<div class="img-div"> 38<img class="img-div-imgSize" style="background-color: #00ff00"/> 39</div> 40 </div> 41 42 </body> 43 </html>
記錄實現效果，只是為了回顧當時解決問題的方式。