HTML如何并列div？求详细解答

以下是具体演示步骤：1、打开一个HTML文件编辑器。先在里面输入HTML的基本元素。2、在body标签里添加一个大div来容纳并列的div。3、在大div里添加想要并列的div元素，并在style属性里添加float：left即可4、运行结果如下图。无论如何变换浏览器宽度，div都是一行展示出来。

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

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

（2）设置float浮动

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

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

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

<div class="app">

<div style="display:inline-blockbackground:#f00">div1</div>

<div style="display:inline-blockbackground:#0f0margin-left:10px">div2</div>

</div>

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

<div class="app">

<div style="float:leftbackground:#f00">div1</div>

<div style="float:leftbackground:#0f0margin-left:10px">div2</div>

</div>

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

<div class="app">

<div style="position: absolutewidth:100pxbackground:#f00">div1</div>

<div style="position: absoluteleft:100pxbackground:#0f0margin-left:10px">div2</div>

</div>

扩展资料：

css清除浮动方法

（1）添加新的元素 、应用 clear：both

.clear {

clear: both 

height: 0

height: 0

overflow: hidden

}

（2）父级div定义 overflow: auto

.over-flow {

overflow: auto

zoom: 1//处理兼容性问题

}

（3）伪类  :after 方法  outer是父div的样式

.outer { zoom:1}    /*==for IE6/7 Maxthon2==*/

.outer :after {

clear:both

content:'.'

display:block

width: 0

height: 0

visibility:hidden

}

参考资料来源：CSS官方文档：css-float

参考资料来源：CSS官方文档：css-Positioning

1、新建一个html页面，用于实现多个div显示在同一行上。

2、在html代码页面上写两个div标签，并分别给这个两个div标签添加class类，类名分别为：one，two。如下图所示：

3、创建div标签后开始设置两个div的样式，把样式写在style标签里面。css样式代码如下图所示：

4、设置好class类属性后，保存html代码，在浏览器打开html页面，会看到多个div同时并列显示了。

当然，针对div的并列显示方法有多种，这里提供的是一种普通的方法。

---