在HTML中实现两个div并排显示

在HTML中实现两个div并排显示
在HTML中让两个div并排显示，通常情况下有三种实现方式，包括:

（1）设置为行内样式，display:inline-block

（2）设置float浮动

（3）设置position定位属性为absolute

以下为三种方式的具体实现代码：

个人觉得float浮动方式比较好用。

1、设置每个div的展现属性为行内样式，示例代码为：

<div class="app"><div style="display:inline-block;background:#f00;">div1</div><div style="display:inline-block;background:#0f0;margin-left:10px;">div2</div></div>

2、设置float浮动，示例代码为：

<div class="app"><div style="float:left;background:#f00;">div1</div><div style="float:left;background:#0f0;margin-left:10px;">div2</div></div>

3、设置position定位属性为absolute, 示例代码为：

<div class="app" style="position: relative"><div style="position: absolute;width:100px;background:#f00;">div1</div><div style="position: absolute;left:100px;background:#0f0;margin-left:10px;">div2</div></div>

在HTML中实现两个div并排显示相关推荐

HTML页面中使两个div并排显示
在HTML中实现两个div并排显示,方法如下: 方法1:设置float浮动对需要并排显示的div设置样式:style="float:left;" <div style=&q ...
Summary_HTML中让两个div并排显示
在HTML中让两个div并排显示,通常情况下有三种实现方式,包括: (1)设置为行内样式,display:inline-block (2)设置float浮动 (3)设置position定位属性为abs ...
HTML页面中使两个div并排显示如何实现
本文主要介绍了HTML页面中使两个div并排显示的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着微点阅读小编来一起学习学习吧在HTML中实现两 ...
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
（转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）...
一.文字环绕效果: html代码如下: 1 <body>2 3 <style type="text/css">4 #big img {float: left ...
如何让两个div并排布局？
效果前: 效果后: 原因:div为块级元素,独占一行过程:1.当单独对第一个div添加"float:left;",会出现以下效果分析:a.将div的宽高设置不同观看效果.b.设 ...

在HTML中实现两个div并排显示

在HTML中实现两个div并排显示相关推荐

最新文章

热门文章