HTML页面中使两个div并排显示的实现


Posted in HTML / CSS onMay 15, 2022

在HTML中实现两个div并排显示,方法如下:

方法1:设置float浮动

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

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

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

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

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

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

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

inline-block存在的小问题

问题描述

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

解决方法:

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

CSS display属性详解

display属性值如下:

  • display:none —— 将元素隐藏,不在文档流中占位,浏览器也不会解析该元素。
  • display:block —— 此元素将显示为块级元素,此元素前后会带有换行符。
  • display:inline —— 此元素会被显示为内联元素,元素前后没有换行符。
  • display:inline-block —— 行内块元素。
  • ……

块级元素

  • 总是以一个块的形式表现出来,占领一整行。若干同级块元素会从上之下依次排列(使用float属性除外)。
  • 可以设置高度、宽度、以及margin属性和padding属性。
  • 当宽度(width)缺省时(未明确指定其宽度),它的宽度是其容器的100%。
  • 块级元素中可以容纳其他块级元素或行内元素。
  • 块级元素的display属性值默认为block。

行内元素(内联元素)

  • 行内元素不会单独占据一整行,而是只占领自身的宽度和高度所在的空间。若干同级行内元素会从左到右(即某个行内元素可以和其他行内元素共处一行),从上到下依次排列。
  • 行内元素不可以设置高度、宽度,其高度一般由其字体的大小来决定,其宽度由内容的长度控制。
  • 行内元素只能设置左右的margin值和左右的padding值,而不能设置上下的margin值和上下的padding值。因此我们可以通过设置左右的padding值来改变行内元素的宽度。
  • 行内元素一般不可以包含块级元素。
  • 块级元素的display属性值默认为inline。

 到此这篇关于HTML页面中使两个div并排显示的实现的文章就介绍到这了!

 
HTML / CSS 相关文章推荐
纯DOM+CSS3实现简单的小风车动画
Sep 27 HTML / CSS
使用CSS3的appearance属性改变任何元素的浏览器默认风格
Dec 24 HTML / CSS
使用css3制作登录表单的步骤
Apr 07 HTML / CSS
一款纯css3实现的鼠标经过按钮特效教程
Nov 09 HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 HTML / CSS
CSS3 实现时间轴动画
Nov 25 HTML / CSS
HTML5中的新元素介绍
Oct 17 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
Aug 02 HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
Jun 04 HTML / CSS
html中相对位置与绝对位置的具体使用
CSS 左边固定宽右边自适应的6种方法
May 15 #HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 #HTML / CSS
css3 选择器
May 11 #HTML / CSS
六个好看实用的 HTML + CSS 后台登录入口页面
HTML CSS 一个标签实现带动画的抖音LOGO
常用的文件对应的MIME类型汇总
Apr 26 #HTML / CSS
You might like
无数据库的详细域名查询程序PHP版(3)
2006/10/09 PHP
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
javascript 日期常用的方法
2009/11/11 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
django 模型中的计算字段实例
2020/05/19 Python
python如何进入交互模式
2020/07/06 Python
浅析python函数式编程
2020/09/26 Python
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
幼儿园小班教学反思
2014/02/02 职场文书
食品安全处置方案
2014/06/14 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
收费员岗位职责
2015/02/14 职场文书
单位证明范文
2015/06/18 职场文书
酒桌上的祝酒词
2015/08/12 职场文书