html 中 div 盒子并排展示

在项目中，遇到一个前端问题，觉得小问题就别去找前端工程师解决了，还是自己动动手吧。

相信不管小问题，大问题 都应该先自己尝试解决，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 3 4 5 6 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 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

 

记录实现效果，只是为了回顾当时解决问题的方式。