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 相关文章推荐
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
css3实现超炫风车特效
Nov 12 HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
Jan 31 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
PHP中用正则表达式清除字符串的空白
2011/01/17 PHP
PHP Directory 函数的详解
2013/03/07 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
javascript面向对象之Javascript 继承
2010/05/04 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
python http基本验证方法
2018/12/26 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
给同事的道歉信
2014/01/11 职场文书
百日安全生产活动总结
2014/07/05 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
就业协议书怎么填
2014/09/15 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
汶川大地震感悟
2015/08/10 职场文书
2016年国培研修日志
2015/11/13 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python