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 <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>

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

转载于:https://www.cnblogs.com/nzplearnSite/p/10014123.html

html 中 div 盒子并排展示相关推荐

vue中的横向排列_DIV横向排列_CSS如何让多个div盒子并排同行显示
如何让多个div盒子并排同行div横向排列显示呢? 我们先设置3个div盒子对象,什么css样式都不设置看看效果.代码如下: 三个div盒子均独占一行显示 div盒子本身默认样式属性是独占一行,而解决 ...
div 左右并排,使用CSS如何让两个div并排显示
用CSS如何让两个DIV盒子并排体现呢? 各人知道默认情况下DIV是独占一排的,DIV不设置任何CSS格局,这个DIV盒子都邑独有一行踊跃换行. 运用CSS让两个DIV并排闪现,排成一排显示思空见贯方 ...
html在一行内横向排列并排同行同时显示两个多个div盒子的方法
一.并排在一行的两个div样式有这种情况:ie或者ff下对于子div设置float左的时候,如果另外的子div没有设置float左的话,两个浏览器下会有区别,具体有一个会产生间隙.兼容做法就是都设置 ...
html在一行内横向排列并排同行同时显示两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法
01/23/2014, Posted in 移动 Comments: No comments 最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属 ...
css图片在盒子里居中,让图片在div盒子中水平垂直居中
//调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...
横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法
最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先: 一.并排在一行的两个div样式有这种情况:ie或者ff下对于子 ...
Markdown图片并排展示、图注对齐
文章目录前言方案一:利用Html的<table>标签方案二:利用Html的<center>标签未能实现的思路:使用LaTeX插入图片并控制对齐附:单张图片图注对齐前 ...
html中div内容居中的方法
一.div内容居中的方法: 方法1:table-cell div中的内容居中:不改变盒子尺寸. <!DOCTYPE html> <html lang="en"& ...
css中div超出自动换行
目录页面样式 html页面代码 scss样式代码页面样式这是布局完成之后的整个页面的布局,可以看到每行显示两个div html页面代码 <div className='home'> ...

html 中 div 盒子并排展示

html 中 div 盒子并排展示相关推荐

最新文章

热门文章