css 併排放置兩個div

2021-09-25 06:51:41 字數 1536 閱讀 8008

寫**時遇到了併排放置兩個div的需求,於是總結了一下,有以下幾種方法可以實現:

(1)設定浮動:

a)兩個div都設定為左浮動:

放置兩個div在同一行<

/title>

.left_div

.right_div

<

/style>

<

/head>

<

!-- 設定浮動 --

>

="left_div" style=

"float: left;"

>first div<

/div>

="right_div" style=

"float: left;"

>second div<

/div>

<

/div>

<

/body>

<

/html>b)也可以把乙個設定為左浮動,乙個設定為右浮動:

/div>注意: 設定 div為float之後,如果沒有清除浮動,則下乙個被設定 float 的 div 會根據上乙個 float 的 div 的布局進行排版,而下乙個沒設定 float 屬性的 div 則是根據它的前乙個元素進行排版。

="left_div" style=

"display: inline;"

>first div<

/div>

="right_div" style=

"display: inline;"

>second div<

/div>

<

/div>

"margin: 0px;padding: 0px;"

>

"margin: 0px;padding: 0px;"

>

="left_div"

>first div<

/div>

<

/td>

"margin: 0px;padding: 0px;"

>

="right_div"

>second div<

/div>

<

/td>

<

/table>

CSS中兩個div重疊放置

兩個的div的重疊放置,比如頁面中要做乙個幻燈片的效果,在內的右下方設定一排選擇的小區域,absolut 將物件從文件流中拖出,使用left,right,top,bottom等屬性,相對於其最接近的乙個最有定位設定的父物件進行絕對定位。如果不存在這樣的父物件,則依據body物件。將.pic 的pos...

讓兩個Div併排顯示

一 使用display的inline屬性 aaaa bbbb 二 通過設定float來讓div併排顯示 1111 2222 2222 2222 三 對於兩個div併排,左邊為絕對寬度,右邊為相對寬度的,需要用到這種布局的情況比較多見,如左邊為導航,右邊為內容的頁面 1 將最大的容器padding l...

讓兩個Div併排顯示

一 使用display的inline屬性 html divstyle width 300px height auto float left display inline aaaa div divstyle width 300px height auto float left display inli...