html中两个选择框如何并排放置（一）

主要有三种方法：

1. 使用display的inline属性 

   

2. 通过设置float来让Div并排显示 

3. 对于两个div并排，左边为绝对宽度，右边为相对宽度的，需要用到这种布局的情况比较多见，如左边为导航，右边为内容的页面

• 将最大的容器padding-left固定宽度，左边的固定宽度的一块position:absolute，然后right的一块width为百分百

• 使用position:absolute

   

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

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

（2）设置float浮动

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

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

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">

<div style="position: absolute;width:100px;background:#f00;">div1</div>

<div style="position: absolute;left:100px;background:#0f0;margin-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、div默认是纵向排列的，例子如下：

<div id="wrap">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
</div>

 

2、如果要div横向排列，用：float：left

#div1{
    float: left;
}
#div2 {
    float: right;
}
#div3 {
    float: right;
}

 

横向排列了，但是顺序错位了。

div2 和 div3，可以通过将它们再用一个 div 包起来的方法解决。

3、inline-block 行块标签

#div1, #div2, #div3{
    display: inline-block;
}