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