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将你的设计带入下个高度
Aug 08 HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
Dec 11 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
浅析HTML5中的 History 模式
Jun 22 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
Jul 12 HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 30 HTML / CSS
为什么你写的height:100%不起作用
May 10 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+Html+缓存
2006/11/25 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
smarty中post用法实例
2014/11/28 PHP
php写app用的框架整理
2019/09/29 PHP
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
jQuery实现ichat在线客服插件
2014/12/29 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
JavaScript枚举选择jquery插件代码实例
2020/11/17 jQuery
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
Python psutil模块简单使用实例
2015/04/28 Python
Django如何自定义分页
2018/09/25 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
python中append实例用法总结
2019/07/30 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
Python celery原理及运行流程解析
2020/06/13 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
有关HTML5页面在iPhoneX适配问题
2017/11/13 HTML / CSS
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
工程项目经理任命书
2014/06/05 职场文书
校长创先争优承诺书
2014/08/30 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
谢师宴学生答谢词
2015/09/30 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
MySQL七种JOIN类型小结
2021/10/24 MySQL