今天这篇我们来学习和了解“HTML中如何实现多个div并排显示”，下文的讲解详细，步骤过程清晰，对大家进一步学习和理解“HTML中如何实现多个div并排显示”有一定的帮助。有这方面学习需要的朋友就继续往下看吧！

在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中如何实现多个div并排显示内容，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Canvas中图片镜像翻转怎么操作，有多少方法

  这篇文章主要介绍了canvas实现图片镜像翻转的2种方式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• 在CSS中怎样做缺角矩形的效果，方法是什么

  这篇文章主要介绍了CSS3实现缺角矩形，折角矩形以及缺角边框，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• 用Canvas怎么样制作图片编辑器，具体的步骤及代码是什么

  这篇文章主要介绍了一个基于canvas的移动端图片编辑器的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• HTML页面中怎么显示特殊符号，怎么避免显示出错

  在使用html进行编辑的时候，特殊符号往往会显示错误，极端情况下更可能导致网页崩溃。本文就来介绍一下如何显示特殊字符，感兴趣的可以了解一下

• CSS中做可控虚线的方法是什么，有何技巧

  这篇文章主要介绍了css实现可控虚线的方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下