HTML页面中使两个div并排显示如何实现

本文主要介绍了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 2	`<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并排显示的实现的文章就介绍到这了,

来源：微点阅读 https://www.weidianyuedu.com

HTML页面中使两个div并排显示如何实现相关推荐

HTML页面中使两个div并排显示
在HTML中实现两个div并排显示,方法如下: 方法1:设置float浮动对需要并排显示的div设置样式:style="float:left;" <div style=&q ...
在HTML中实现两个div并排显示
在HTML中实现两个div并排显示在HTML中让两个div并排显示,通常情况下有三种实现方式,包括: (1)设置为行内样式,display:inline-block (2)设置float浮动 (3) ...
Summary_HTML中让两个div并排显示
在HTML中让两个div并排显示,通常情况下有三种实现方式,包括: (1)设置为行内样式,display:inline-block (2)设置float浮动 (3)设置position定位属性为abs ...
css让四个div并排显示,css如何让两个div并排显示？
让两个Div并排显示的方法有很多,使用display的inline属性.通过设置float来让Div并排显示都可以实现,下面我们来看一下CSS实现两个div并排显示的方法. 让两个Div并排显示一. ...
让两个Div并排显示的多种方法
http://www.jb51.net/css/140705.html 让两个Div并排显示的方法有很多,使用display的inline属性.通过设置float来让Div并排显示都可以实现,感兴趣的 ...
div 左右并排,使用CSS如何让两个div并排显示
用CSS如何让两个DIV盒子并排体现呢? 各人知道默认情况下DIV是独占一排的,DIV不设置任何CSS格局,这个DIV盒子都邑独有一行踊跃换行. 运用CSS让两个DIV并排闪现,排成一排显示思空见贯方 ...
两个div并排显示 div居中显示
div并排显示的两种方法 float:left display: inline-block; div居中显示.文字居中显示 text-align: center;margin: 0 auto
如何让两个div并排布局？
效果前: 效果后: 原因:div为块级元素,独占一行过程:1.当单独对第一个div添加"float:left;",会出现以下效果分析:a.将div的宽高设置不同观看效果.b.设 ...
HTML如何让两个div并排在一行,怎么让两个div并排同行显示
如何让两个div并排同行显示前段时间在做界面的时候,想要实现个两个DIV并排的界面,做之前想着挺简单的,只要将一个div浮动就可以了.然后就测试了一下.下面是部分代码自己测试代码 DIV1 DI ...