html 中 div 盒子并排展示

当前位置:首页易利最新客服 >

易利最新客服

html 中 div 盒子并排展示

时间:2019-06-10本站浏览次数:313

       

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

相信不管小问题,大问题 都应该先自己尝试解决,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>

 

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

 




公司地址:晋江市西园街道新华旭汽车基地
联系人:尚欢 13667519194
杨睿 13957697919
电话:13956162333 传真:ngm7m3jm5c@msn.com
邮箱:xei0cuw0@qq.com

粤公网安备 44030702001579号

易利GO官方手机版@