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 相关文章推荐
a标签的css样式四个状态
Mar 09 HTML / CSS
css3实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
推荐一些比较有用的css3新属性
Nov 11 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
Apr 06 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文件目录基础操作
2014/11/11 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
python 调用c语言函数的方法
2017/09/29 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
Python多分支if语句的使用
2020/09/03 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
公司中秋节活动方案
2014/02/12 职场文书
总经理岗位职责
2015/02/04 职场文书
Go语言操作数据库及其常规操作的示例代码
2021/04/21 Golang