div 订阅
DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。 展开全文
DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。
信息
常用操作
网站制作
类    型
软件
缩写
DIV
中文名
分隔,分割,划分
应用范围
软件,互联网
外文名
DIVision
DIV定义
可定义文档中的分区或节(division/section)。
标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。如果用 id 或 class 来标记
,那么该标签的作用会变得更加有效。注释:
是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。提示:请使用
元素来组合块级元素,这样就可以使用样式对它们进行格式化。
收起全文
精华内容
参与话题
问答
  • 最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法下面说两种在屏幕正中...

    最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。
    水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法

    下面说两种在屏幕正中(水平居中+垂直居中)的方法
    放上示范的html代码:

    <body>
    	<div class="main">
    		<h1>MAIN</h1>
    	</div>
    </body>
    
    • 方法一:

    div使用绝对布局,设置margin:auto;并设置top、left、right、bottom的值相等即可,不一定要都是0。

    .main{
    	text-align: center; /*让div内部文字居中*/
    	background-color: #fff;
    	border-radius: 20px;
    	width: 300px;
    	height: 350px;
    	margin: auto;
    	position: absolute;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    }
    

    效果如图:
    这里写图片描述

    • 方法二:
      仍然是绝对布局,让left和top都是50%,这在水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了,效果图和上方相同。
     .main{
    	text-align: center;
    	background-color: #fff;
    	border-radius: 20px;
    	width: 300px;
    	height: 350px;
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	transform: translate(-50%,-50%);
    }
    
    • 方法三:
      对于水平居中,可以使用最简单的<center>标签,不过已经过时了,用法如下:
    <p><center>123</center></p>
    

    这个<center>标签就是相对于<p>标签里的文字,可以使其居中。

    由于center标签已经过时了,所以正规一点的话还是不建议使用的,可以使用如下的方式代替:

    <p style="text-align:center;">123</p>
    


    欢迎大家加入QQ群一起交流讨论,「吟游」程序人生——YinyouPoet
    展开全文
  • 实现div里的img图片水平垂直居中

    万次阅读 多人点赞 2017-03-31 09:53:09
    div> <img src="1.jpg" alt="haha"> </div> </body>方法一: 将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。...

    body结构

    <body>
    	<div>
    		<img src="1.jpg" alt="haha">
    	</div>
    </body>
    

    方法一:
    将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。

    <style type="text/css">
    	*{margin: 0;padding: 0;}
        div{
    		width:150px;
    		height: 100px;
    		display: table-cell;
    		vertical-align: middle;
    		text-align: center;
    		border:1px solid #000;
    	}
    	img {
            width: 50px;
      		height: 50px;
    	}
    </style>
    

    结果如下图所示:
    这里写图片描述

    方法二:
    通过position定位来实现。将div设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于div的中心,要是图片的中心位于div的中心,就需要将图片向上移动图片高度的一半,并向左移动图片宽度的一半。

    <style type="text/css">
    	*{margin: 0;padding:0;}
    	div{
    		width:150px;
    		height: 100px;
    		position: relative;
    		border:1px solid #000;
    	}
    	img {
      		width: 50px;
      		height: 50px;
      		position: absolute;
      		top: 50%;
    		left: 50%;
      		margin-top: -25px; /* 高度的一半 */
      		margin-left: -25px; /* 宽度的一半 */
    	}
    </style>
    

    结果如下图所示:
    这里写图片描述


    很久以前的文章了,看到浏览量这么高,我再补充几种实现方法

    方法三:可以用在不清楚图片图片或元素的真实宽高情况下
    还是通过position定位来实现。将div设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于div的中心,要是图片的中心位于div的中心,就需要将图片向上移动图片高度的一半,并向左移动图片宽度的一半,如果不知道元素的宽高,可以用transform: translate(-50%,-50%);

    <style type="text/css">
        *{margin: 0;padding:0;}
        div{
            width:150px;
            height: 100px;
            position: relative;
            border:1px solid #000;
        }
        img {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
    

    方法四:

    <style type="text/css">
        *{margin: 0;padding:0;}
        div{
            width:150px;
            height: 100px;
            position: relative;
            border:1px solid #000;
        }
        img {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
    

    方法五:弹性布局flex

    <style type="text/css">
        *{margin: 0;padding:0;}
        div{
            width:150px;
            height: 100px;
            border:1px solid #000;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        img {
            width: 50px;
            height: 50px;
        }
    </style>
    

    效果都一样,希望能帮到大家!

    读后有收获并有兴趣的可以微信打赏哈哈:
    在这里插入图片描述

    展开全文
  • HTML如何让IMG自动适应DIV容器大小

    万次阅读 多人点赞 2018-05-22 12:21:12
    HTML如何让IMG自动适应DIV容器...DIV样式(元素居中显示) IMG样式(横向拉伸,纵向自动匹配大小) width:100%; height:auto; DIV样式(元素居中显示) display:flex; align-i...

    HTML如何让IMG自动适应DIV容器大小

    为了让IMG自适应大小,如下我做了一个横向自适应的示例:

    • IMG样式(横向拉伸,纵向自动匹配大小)
    • DIV样式(元素居中显示)

    IMG样式

    (横向拉伸,纵向自动匹配大小)

    	width:100%;
    	height:auto;
    

    (纵向拉伸,横向自动匹配大小)

    	width:auto;
    	height:100%;
    

    DIV样式(元素居中显示)

    	display:flex;
    	align-items:center; 
    	justify-content:center;
    

    示例代码

    如下是两个大小和比例都不同的图片,应用这个方法可以让图片自动填充并居中显示

    <html>
    <head>
    <title>让图片自动适应DIV容器大小</title>
    <style>
    .ShaShiDi{
    width:500px;
    height:400px;
    display:flex;
    align-items:center;
    justify-content:center;
    			/*为了效果明显,可以将如下边框打开,看一下效果*/
    			/* border:1px solid black; */
    }
    
    .ShaShiDi img{
    	width:100%;
    	height:auto;
    }
    
    </style>
    </head>
    <body>
    	<div class="ShaShiDi">
    		<img src="./1.png"/>
    	</div>
    	<div class="ShaShiDi">
    		<img src="./2.png"/>
    	</div>
    </body>
    </html>
    

    展开全文
  • 但是因为我后面的代码中有js在<div id="box"></div>内 画图 (js图库的echart): var myChart = echarts.init(document.getElementById("box"),theme.name);  myChart.setOption(option); 这样执行之后就会...
  • 问题如题,例如在div1后面追加多个有内容的div2,然后让追加的div2的id改变为div3,并且div2的标签的id也变为h1_3,标签的id变为h2_3 不知道有没有说清楚内容,请大神指点。 <div id="div1"> 你好! </div> <div ...
  • <div class="weui-cell" onclick="details(this);> <div class="weui-cell__bd"> <label>{{ useData[i].DATE_TIME }} </div> <div class="weui-cell__ft"> <p>{{ useData[i].DATA }} kWh </...
  • 如何将.aa用JS插入到.bb里,说明{bb不能加“id”因为id已经被别的程序占了。只能用class名了。...<div class="aa"></div> ``` 想JS实现出来的效果就相当于这样的。 ``` <div class="aa"></div> ```
  • 一个div盖住另外一个div,被盖住的那个div里面的一个子元素要盖住那个div 例如: div.a盖住div.b,div.b img盖住div.a
  • <div class="dd-handle" id="li_Preliminary_Analysis">初步分析</div> <div class="dd-handle" id="li_Early_Disposal">先期处置</div> <div class="dd-handle" id="li_...
  • <div>............</div> </div> <div class="nav_con"> <div>............</div> </div> <div class="nav_foot"> <div>............</div> <div>.....</div> </div> </div> ``` 怎样获取...
  • div居中和div内容居中

    万次阅读 2018-08-27 23:44:46
    一、div自身居中: 使用margin:0 auto 上下为0,左右自适应的css样式。 要让div水平居中,那么除了设置css margin:0 auto外,还不能再设置float,不然将会导致div靠左(设置float:left)和div靠右(设置float:...

    一、div自身居中:

    使用margin:0 auto
    上下为0,左右自适应的css样式。

    要让div水平居中,那么除了设置css margin:0 auto外,还不能再设置float,不然将会导致div靠左(设置float:left)和div靠右(设置float:right)。

    1、div布局居中实例代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>div布局居中实例 thinkcss</title>
    <style>
    #jz{ margin:0 auto; width:320px; height:100px; border:1px solid #F00}
    </style>
    </head>
    <body>
    <div id="jz">设置margin:0 auto兼容各大浏览器让div水平居中</div>
    </body>
    </html>

    2、截图
    这里写图片描述
    div盒子水平居中截图

    以上实例正是使用margin:0 auto让div兼容各大浏览器的水平居中。

    二、div内的内容居中:

    内容居中分为div内容水平居中与div内容垂直居中。

    div内容水平居中相比布局div居中,而div内容居中比较简单,只需要设置一个内容居中css(text-align:center)、内容垂直居中(line-height)即可。

    1、div内容水平居中CSS:
    text-align:center
    无论是p还是div都可以对其设置此CSS实现对应对象内的内容水平居中。

    2、div内容垂直居中 行高属性:
    line-height
    要让div内只有一行的内容垂直居中,通常对div设置的height(高)与line-height(行高)相同,即可实现div内容垂直居中。

    3、div内容水平居中与垂直居中实例代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>div内容居中实例 thinkcss</title>
    <style>
    #juzhong{width:320px;height:100px; line-height:100px; text-align:center; border:1px solid #F00}
    </style>
    </head>
    <body>
    <div id="juzhong">text-align和line-height设置水平与垂直居中</div>
    </body>
    </html>

    4、截图
    这里写图片描述
    div内容水平居中与div内容垂直居中布局实例

    从上图可以看见div内容实现两者情况下居中,但没有设置margin:0 auto而div没有水平居中。

    可以实例下再将以上代码拷贝后,加入DIV布局居中代码试试实现DIV的居中。

    展开全文
  • Html div 超出 父div区域

    千次阅读 2019-08-23 16:14:58
    解决方法:在div里面添加下面一句 <div style="clear: both"></div>
  • <div id="showdiv"></div> <div class="kaoqin2"> 签到"> </div> () Dim showdiv showdiv=request("showdiv") Response.write showdiv End sub%> 如何将div 中“山西省太原市”值传过去,写入...
  • divdiv底部居中

    万次阅读 2018-09-05 13:30:02
    position: absolute; bottom: 0; left: 50%; transform: translate(-50%, -50%);  
  • div拖动改变大小

    千次阅读 2019-04-07 11:23:00
    最近在做个页面,需要首页模块可拖动并且编辑大小,首页用到的基本上是div标签, 由于个人不是搞前端的,js真心不是很熟~~~,网上搜索了一些资料,基本上都不完整,都有一定的缺少部分! 于是自己结合网上的多篇...
  • div 标签 与 view 标签

    千次阅读 2019-06-05 17:25:10
    可以把想要写在一个的几个布局写在一个div中, 把另外一个有关联的放到另外一个div中 微信小程序 使用的是view 标签, 它的作用和div 标签 是一样的 html <div id="first"> <p>说明</p> ...
  • <div class="find_txt_con">手机验证码</label><input type="text" placeholder="输入验证码"/><div id="v_container" style="width:110px;height:32px;float:right"></div></div> <p><input id="my_button" type...
  • css设置div铺满全屏幕

    万次阅读 2018-06-07 23:31:28
    .container {height:100%;width:100%;/*width: 100%;*/border: 1px solid green;position:fixed;background: url(image/login.jpg) no-repeat;text-align:center;}
  • <!... ; charset=utf-8" /> <title>Demo: Payment Accounts .wrapper{ font:12px Arial;...<div class="wrapper"> ...但这样,问题就来了,最右边的div一定要指定很大的宽度,才能靠右,如果设置了float:right也不行。
  • MVC项目View中,现在有2个divDiv1和Div2 Div1是在页面一刷新的时候就会加载的 Div2是在js中执行初始化脚本时,append方法添加的 由于这两个div挨得近,所以Div2会覆盖住Div1(因为html加载好后,在执行的js中...
  • div覆盖div DIV相互重叠如何解决

    千次阅读 2018-01-06 23:14:09
    http://www.divcss5.com/rumen/r674.shtml
  • div.onclick=function (e) { console.log('div is clicked') } document.body.onclick=function (e) { console.log(e.target.nodeName) if(e.target.nodeName==='DIV'){ console.log('this is message ...
  • ``` <!... ...<script src="http://www.pc120xz.cn/scripts/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> ...<div id="top" style=...</div>在同一页面可以 但DIV浮动在iframe上时 失效 ```
  • div拖拽实现延伸

    万次阅读 2018-07-12 15:00:37
    div拖拽 原理: 鼠标事件 mousedown mousemove mouseup 注意事项: 被拖动的div的position属性值一定是absolute。 onmousedown事件需要在window.onload时加载。 如果被拖动的div上有文字会有自带的文字...
  • echo "<div class = $bar style='height:$heipx'><div class= bar_num>$countdata[$i]</div> <div class= bar_txt>$textdata[$i]</div></div>"; } ?> </div> 我想要不断定时刷新循环生成的DIV,我大概...
  • 汇编div指令

    万次阅读 2019-06-08 17:23:56
    div指令是除法指令。100001/100,100001是被除数,100是除数。一般格式为:div reg或div 内存单元,reg和内存单元存放的是除数,除数可分为8位和16为2种。 被除数:默认放在AX或DX和AX,如果除数为8位,被除数则为...
  • ``` <!DOCTYPE html> <title></title> .logo1{padding:0px 0px ...<div class="logo1"></div> <div class="logo2"></div> ``` 俩个div同行,缩小浏览器窗口是总是一个将领一个覆盖。为什么
  • div同行实现或div自动换行

    千次阅读 2019-04-25 11:48:55
    使用"float:left"时,div会影响下一个div。"float:left"会让下一个div排在右边,当前div排在左边。 同行显示 <!DOCTYPE HTML> <html> <body> <div> <div style="float:left;display:...
  • display:none"></div> </div> 如上:info 这DIV下面有两个主要的子DIV,column-div(默认显示)和line-div(默认关闭),还有两个button(控制line-div的显示和隐藏),现在希望info的宽度随着line-div的显示和隐藏...

空空如也

1 2 3 4 5 ... 20