今天这篇我们来学习和了解“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进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。