您正在使用IPV4(3.215.79.204)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】618采购季来袭!爆款云服务器18元起,参与活动享多重好礼      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 情人节 35
2022年 中秋节 72
2023年 元 旦 185
2023年 春 节 206
 
本类新增
本类热门文章
您现在的位置:首页 >> 脚本程序 >> 内容
HTML页面中使两个div并排显示的实现
内容摘要: 在HTML中实现两个div并排显示,方法如下:方法1:设置float浮动对需要并排显示的div设置样式:style='float:left;'divstyle='float:left;'div1/div方法2:设置div为行内样式对需要并排显示的div设置样式:display:inline-blockdivstyle='display:inline-bloc......
在HTML中实现两个div并排显示,方法如下:

方法1:设置float浮动

对需要并排显示的div设置样式:style="float:left;"

<divstyle="float:left;">div1</div>

方法2:设置div为行内样式

对需要并排显示的div设置样式:display:inline-block

<divstyle="display:inline-block;">div1</div>

方法3:设置position定位属性为absolute,示例代码如下

<divstyle="position:absolute;width:100px;">div1</div>

<divstyle="position:absolute;left:100px;margin-left:10px;">div2</div>

inline-block存在的小问题

问题描述

使用display:inline-block后,存在间隙问题,间隙为4像素,这个问题产生的原因是换行引起的,因为我们写标签时通常会在标签结束符后顺手打个回车,而回车会产生回车符,回车符相当于空白符,通常情况下,多个连续的空白符会合并成一个空白符。

解决方法:

对父元素添加属性,{font-size:0},即将字体大小设为0,那么那个空白符也变成0px,从而消除空隙。

CSSdisplay属性详解

display属性值如下:

display:none——将元素隐藏,不在文档流中占位,浏览器也不会解析该元素。

display:block——此元素将显示为块级元素,此元素前后会带有换行符。

display:inline——此元素会被显示为内联元素,元素前后没有换行符。

display:inline-block——行内块元素。

……

块级元素

总是以一个块的形式表现出来,占领一整行。若干同级块元素会从上之下依次排列(使用float属性除外)。

可以设置高度、宽度、以及margin属性和padding属性。

当宽度(width)缺省时(未明确指定其宽度),它的宽度是其容器的100%。

块级元素中可以容纳其他块级元素或行内元素。

块级元素的display属性值默认为block。

行内元素(内联元素)

行内元素不会单独占据一整行,而是只占领自身的宽度和高度所在的空间。若干同级行内元素会从左到右(即某个行内元素可以和其他行内元素共处一行),从上到下依次排列。

行内元素不可以设置高度、宽度,其高度一般由其字体的大小来决定,其宽度由内容的长度控制。

行内元素只能设置左右的margin值和左右的padding值,而不能设置上下的margin值和上下的padding值。因此我们可以通过设置左右的padding值来改变行内元素的宽度。

行内元素一般不可以包含块级元素。

块级元素的display属性值默认为inline。

上一篇:纯js导出csv 下一篇:Vue实现简单跑马灯特效
发布日期:2022/5/15
手机扫二维码直达本页
发布时间:15:21:30
点击:48
录入:齐天大圣
相关文章
Baidu

YiJiaCMS 6.3.0.220527(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2022