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 相关文章推荐
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
CSS3不透明度实例讲解
Apr 26 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
详解CSS3浏览器兼容
Dec 14 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 HTML / CSS
css3新特性的应用示例分析
Mar 16 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
MySQL授权问题总结
2007/05/06 PHP
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
学习php设计模式 php实现建造者模式
2015/12/07 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
基于jquery的cookie的用法
2011/01/10 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
python2.7删除文件夹和删除文件代码实例
2013/12/18 Python
python获取外网ip地址的方法总结
2015/07/02 Python
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
Python实现的文本编辑器功能示例
2017/06/30 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
小学数学教学经验交流材料
2014/05/22 职场文书
2015年银行客户经理工作总结
2015/04/01 职场文书
负责培养人意见
2015/06/05 职场文书
小学数学国培研修日志
2015/11/13 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
关于Vue中的options选项
2022/03/22 Vue.js