html 中 div 盒子并排展示
在项目中，遇到一个前端问题，觉得小问题就别去找前端工程师解决了，还是自己动动手吧。
相信不管小问题，大问题 都应该先自己尝试解决，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 盒子并排展示的更多相关文章
- DIV横向排列_CSS如何让多个div盒子并排同行显示
如何让多个div盒子并排同行div横向排列显示呢? 我们先设置3个div盒子对象,什么css样式都不设置看看效果.代码如下: 三个div盒子均独占一行显示 div盒子本身默认样式属性是独占一行,而解决 ...
- div盒子水平居垂直中的几种方法
div盒子水平居垂直中的几种方法<!DOCTYPE html><html> <head> <mete charset="ut ...
- div盒子或者图片并排居中
要使div总是找不到原因居中很简单,float和display都可以实现,float就不说了,这里说一下display:line-block,比如四个或者多个div盒子,明明设置好了宽度后,总有一个上 ...
- 让图片在div盒子中水平垂直居中
//调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...
- div垂直居中 css div盒子上下垂直居中
div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...
- 在mvc视图中实现rdlc报表展示
需求:在view视图页面中嵌入rdlc报表,rdlc的xml为动态传入的xml字符串.本项目是基于abp框架 可能出现问题: 1.rdlc报表是由asp.net的服务器控件ReportViewer来支 ...
- js中的盒子模型
说到盒子模型,你第一时间会想到css盒子模型,css中的盒子模型包括(内容区+内边距+边框).那在js中怎么去获取这些属性值呢?下面一起来学习js中的盒子模型. css样式 body { margin ...
- 横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法
最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子d ...
- CSS学习系列1 - CSS中的盒子模型 box model
css中有一个盒子模型的概念. 主要是用来告诉浏览器如何来计算页面元素的宽度和高度, 比如该元素的宽度/高度 是否包括内边距,边框,外边距. 盒子模型有一个属性box-sizing属性来说明是否包括 ...
随机推荐
- par函数fg参数-控制前景色
fg参数用来控制前景色,其实指的就是x轴和y轴的轴线和刻度线的颜色 在R语言中,会根据fg, col 任何一个参数的值,自动的将两个参数的值设置为相同的值,举个例子: par(fg = "r ...
- Python如何输出包含在对象中的中文字符？
>>> bb = {'classes': ['\xe5\xb0\x96\xe6\xa4\x92\xe5\x9c\x9f\xe8\xb1\x86\xe4\xb8\x9d', '\xe5 ...
- 如何让View一直沿z轴旋转
#import <QuartzCore/QuartzCore.h>... CABasicAnimation *rotationAni = [CABasicAnimation animati ...
- 一篇文看懂Hadoop
我们很荣幸能够见证Hadoop十年从无到有,再到称王.感动于技术的日新月异时,希望通过这篇内容深入解读Hadoop的昨天.今天和明天,憧憬下一个十年. 本文分为技术篇.产业篇.应用篇.展望篇四部分 技 ...
- 动态提交使用jQuery 完成ajax 文件下载----后端php
1.js代码 // Ajax 文件下载 //当不用传参时,可以将data去掉 jQuery.download = function(url, data, method){ // 获得url和data ...
- Spring学习笔记——Spring依赖注入原理分析
我们知道Spring的依赖注入有四种方式,各自是get/set方法注入.构造器注入.静态工厂方法注入.实例工厂方法注入 以下我们先分析下这几种注入方式 1.get/set方法注入 public cla ...
- Linq中使用Left Join rught join
准备一些测试数据,如下: use Test Create table Student( ID int identity(1,1) primary key, [Name] nvarchar(50) no ...
- 用cocos2d 2.1制作一个过河小游戏(4): 游戏主逻辑BaseLayer设计
前段时间一直在忙.没有时间更新博客.今天还是抽点时间把最后一小部分游戏的实现放上来吧. BaseLayer.h: #import <GameKit/GameKit.h> #import & ...
- 如何根据select选择的值反查option的属性
有时候select已经被选中了,想知道这个选中option的属性又该如何处理呢? 我这里提供一种粗暴的方式 <!DOCTYPE HTML> <html lang="en-U ...
- Oracle-未能加载文件或程序集“oracle.dataaccess”或它的某一个依赖项。试图加载格式不正确的程序。
未能加载文件或程序集“oracle.dataaccess”或它的某一个依赖项.试图加载格式不正确的程序. 说明: 执行当前 Web 请求期间,出现未经处理的异常.请检查堆栈跟踪信息,以了解有关该错误以 ...