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

相信不管小问题，大问题 都应该先自己尝试解决，google 、度娘查查资料，这绝对是增加理解和记忆的好机会。

##问题描述：

　　　　　将两个img图片 并排展示

解决思路如下：

1、先画一个盒子 div ，在页面中规划出展示内容的区域位置(ps：width、height 这两个是必要的)，如果需要水平居中于浏览器、推荐使用样式即可。（ps：这样可使浏览器更加兼容）

　例如：

 .div-levelCenter{

     margin:0 auto;

     width:525px;

     height:300px;

     /* border:1px solid #F00; 能标记出在页面中的位置和区域 */

 }

效果如下（ps：为了能更清楚看见盒子的位置及内容区域，用红色边框标记）

　　2、在这个盒子里，再规划出两个div盒子，这两盒子是用来放图片内容的，盒子大小是根据盒子里的内容来决定的，只要设置两个图片的width、height即可。（ps：这两个盒子要并排展示）

 .div-levelCenter .img-div {

     /*

     display 设置 inline-block 、inline 都能水平并排展示。

     设置 inline-block 时，可以修改盒子的width、height；

     设置 inline 时是根据盒子里的内容的width、height来决定，且直接修改盒子width、

         height无效。

     */

     /*display:inline;*/

     display:inline-block;

     float:left;

     padding:5px;

     border:1px solid #009A61;

 }

效果如下（ps：为了能更清楚看见盒子的位置及内容区域，用绿色边框标记）

3、这两个绿色边框盒子就是用来放图片内容的，设置图片width、height在最外层div盒子尺寸内

 .div-levelCenter .img-div .img-div-imgSize {

     width:250px;

     height:250px;

 }

效果如下（ps：直接使用黑、绿背景色来充当图片）

黑色、绿色背景就是图片展示的内容区域。

整体html 及 css 代码如下：

 <!DOCTYPE HTML>

 <html>

 <head>

 <style type="text/css">

 .div-levelCenter{

     margin:0 auto;

     width:525px;

     height:300px;

    border:1px solid #F00; /*能标记出在页面中的位置和区域 */

  }

 .div-levelCenter .img-div {

     /*

     display 设置 inline-block 、inline 都能水平并排展示。

     设置 inline-block 时，可以修改盒子的width、height；

     设置 inline 时是根据盒子里的内容的width、height来决定，且直接修改盒子width、height无效。

     */

     /*display:inline;*/

     display:inline-block;

     float:left;

     padding:5px;

     border:1px solid #009A61;

 }

 .div-levelCenter .img-div .img-div-imgSize {

     width:250px;

     height:250px;

 }

 </style>

 </head>

 <body>

 <div class="div-levelCenter">

     <div class="img-div">

       <img class="img-div-imgSize" style="background-color: #000"/>

     </div>

     <div class="img-div">

        <img class="img-div-imgSize" style="background-color: #00ff00"/>

     </div>

 </div>

 </body>

 </html>

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

html 中 div 盒子并排展示的更多相关文章

  1. DIV横向排列_CSS如何让多个div盒子并排同行显示

    如何让多个div盒子并排同行div横向排列显示呢? 我们先设置3个div盒子对象,什么css样式都不设置看看效果.代码如下: 三个div盒子均独占一行显示 div盒子本身默认样式属性是独占一行,而解决 ...

  2. div盒子水平居垂直中的几种方法

      div盒子水平居垂直中的几种方法<!DOCTYPE html><html>    <head>        <mete charset="ut ...

  3. div盒子或者图片并排居中

    要使div总是找不到原因居中很简单,float和display都可以实现,float就不说了,这里说一下display:line-block,比如四个或者多个div盒子,明明设置好了宽度后,总有一个上 ...

  4. 让图片在div盒子中水平垂直居中

    //调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...

  5. div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...

  6. 在mvc视图中实现rdlc报表展示

    需求:在view视图页面中嵌入rdlc报表,rdlc的xml为动态传入的xml字符串.本项目是基于abp框架 可能出现问题: 1.rdlc报表是由asp.net的服务器控件ReportViewer来支 ...

  7. js中的盒子模型

    说到盒子模型,你第一时间会想到css盒子模型,css中的盒子模型包括(内容区+内边距+边框).那在js中怎么去获取这些属性值呢?下面一起来学习js中的盒子模型. css样式 body { margin ...

  8. 横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法

    最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子d ...

  9. CSS学习系列1 - CSS中的盒子模型 box model

    css中有一个盒子模型的概念. 主要是用来告诉浏览器如何来计算页面元素的宽度和高度, 比如该元素的宽度/高度 是否包括内边距,边框,外边距.  盒子模型有一个属性box-sizing属性来说明是否包括 ...

随机推荐

  1. （转）sqlite3使用中的常见问题

    1. 创建数据如果不往数据库里面添加任何的表,这个数据库等于没有建立,不会在硬盘上产生任何文件,如果数据库已经存在,则会打开这个数据库. 2. 如何通过sqlite3.dll与sqlite3.def生 ...

  2. 【Java集合的详细研究2】浅谈Arrays.asList的使用

    首先,该方法是将数组转化为list.有以下几点需要注意: (1)该方法不适用于基本数据类型(byte,short,int,long,float,double,boolean) (2)该方法将数组与列表 ...

  3. JavaSE（八）之Map总结

    上一篇是总结了Collection接口的各种实现类,这一篇我将分享的是Map的总结,希望大家点评! 一.Map接口 1.1.为什么Collection不能满足集合的所有功能? Collection接口 ...

  4. jQuery-处理元素内容、表单元素

    处理元素内容 1.text方法 使用说明: 1)不传参数 得到jQuery对象内所有元素及其后代元素的文本内容 2)传入用于设置匹配元素的文本内容 3)传入function 使用函数来设置jQuery ...

  5. 51地图标注接口(EZMarker API)

    功能 在很多时候,您需要您的用户标出一个位置,比如:一个房地产网站,用户在登记新楼盘的时候,就需要在地图上标出这个楼盘的位置,这个时候就可以用到本接口. 地图标注接口(EZMarker API)是我要 ...

  6. OpenCV学习：图像的载入和显示

    一.使用IplImage结构读取并显示图像文件: 运行结果: 二.使用Mat类读取并显示图像文件: 使用 Mat 类,内存管理变得简单,不再像使用 IplImage 那样需要自己申请和释放内存,而且一 ...

  7. linux 数据盘和系统盘的查看

    系统盘就像linux的c盘,使用df -l命令查看 如下所示: 可以看到根路径 / 都是位于系统盘.而/root,/home,/usr就如同c盘下的c:\windows,c:\usr这些目录 如果单独 ...

  8. C# Smtp方式发送邮件

    //简单邮件传输协议类             System.Net.Mail.SmtpClient client = new System.Net.Mail.SmtpClient();        ...

  9. Maven配置默认使用的JDK版本

    问题: 创建maven项目的时候,jdk版本是1.7版本,而自己安装的是1.8版本,从而导致无法使用lambda等Java8新特性. 每次右键项目名-maven->update project ...

  10. 墨卡托投影， GPS 坐标转像素， GPS 坐标转距离

    Before: 1. 研究的需要, 在 google map 上爬取了一些的静态卫星地图图片,每张图片的像素为 256*256 2. 通过 photshop 将这些地图碎片手动拼成了地图, 地图只是覆 ...