源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 5342|回复: 0

[CSS/Html] HTML页面中使两个div并排显示的实现

[复制链接]

1169

主题

1557

帖子

8820

金币

超级版主

Rank: 8Rank: 8

积分
19326
发表于 2022-12-30 14:19:02 | 显示全部楼层 |阅读模式
本文主要介绍了HTML页面中使两个div并排显示的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

在HTML中实现两个div并排显示,方法如下:

方法1:设置float浮动

对需要并排显示的div设置样式:style="float:left;"
  1. <div style="float:left;">div1</div>
复制代码

方法2:设置div为行内样式

对需要并排显示的div设置样式:display:inline-block
  1. <div style="display:inline-block;">div1</div>
复制代码

方法3:设置position定位属性为absolute,示例代码如下
  1. <div style="position: absolute;width:100px;">div1</div>
  2. <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 div并排显示内容请搜索锦尚中国以前的文章或继续浏览下面的相关文章,希望大家以后多多支持锦尚中国!

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-4-16 06:17 , Processed in 0.029681 second(s), 16 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明