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;
}