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 相关文章推荐
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
Dec 20 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
html通过canvas转成base64的方法
Jul 18 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
html5需遵循的6个设计原则
Apr 27 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 HTML / CSS
AmazeUI 输入框组的示例代码
Aug 14 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 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
JQuery中操作Css样式的方法
2014/02/12 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
详解python深浅拷贝区别
2019/06/24 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
Django在Model保存前记录日志实例
2020/05/14 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
thinkphp5 路由分发原理
2021/03/18 PHP
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
舞蹈比赛获奖感言
2014/02/04 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
2014年纳税评估工作总结
2014/12/23 职场文书
Django与数据库交互的实现
2021/06/03 Python
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
4种方法python批量修改替换列表中元素
2022/04/07 Python
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server