HTML中如何实现多个div并排显示-群英

上一篇：CSS滚动条样式设置有哪些属性，怎么用下一篇：CSS布局如何实现左固定右自适应，有什么方法

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

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

对需要并排显示的div设置样式：style="float:left;"

<div style="float:left;">div1</div>

对需要并排显示的div设置样式：display:inline-block

<div style="display:inline-block;">div1</div>

<div style="position: absolute;width:100px;">div1</div>
<div style="position: absolute;left:100px;margin-left:10px;">div2</div>

问题描述

使用display:inline-block后，存在间隙问题，间隙为4像素，这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符。

解决方法：

display属性值如下：

行内元素不会单独占据一整行，而是只占领自身的宽度和高度所在的空间。若干同级行内元素会从左到右（即某个行内元素可以和其他行内元素共处一行），从上到下依次排列。
行内元素不可以设置高度、宽度，其高度一般由其字体的大小来决定，其宽度由内容的长度控制。
行内元素只能设置左右的margin值和左右的padding值，而不能设置上下的margin值和上下的padding值。因此我们可以通过设置左右的padding值来改变行内元素的宽度。
行内元素一般不可以包含块级元素。
块级元素的display属性值默认为inline。

到此这篇关于“HTML中如何实现多个div并排显示”的文章就介绍到这了,更多相关HTML中如何实现多个div并排显示内容，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！