讓兩個Div併排顯示

2022-08-04 11:51:11 字數 2229 閱讀 7625

一、使用display的inline屬性

html**

<

divstyle

="width:300px; height:auto; float:left; display:inline"

>

aaaa

div>

<

divstyle

="width:300px; height:auto; float:left; display:inline"

>

bbbb

div>

aaaa

bbbb

二、通過設定float來讓div併排顯示

html**

<

style

>

#left,#right      

style

>

<

divid

= "main "

>

<

divid

= "left "

>

1111 

div>

<

divid

= "right "

>

2222 

<

br>

2222 

<

br>

2222 

div>

<

divstyle

="clear:both"

>

div>

div>

1111 

2222

2222

2222

三、對於兩個div併排,左邊為絕對寬度,右邊為相對寬度的,需要用到這種布局的情況比較多見,如左邊為導航,右邊為內容的頁面

1、將最大的容器padding-left固定寬度,左邊的固定寬度的一塊position:absolute,然後right的一塊width為百分百

2、 使用position:absolute。**如下。

html**

<

style

>

body   

html /*相容firefox的div高度100%*/   

#left   

#right   

style

>

<

divid

="left"

>

left

div>

<

divid

="right"

>

right

div>

left

right

這段**主要涉及到以下兩點點比較重要的:

(1)相容firefox實現div高度100%;

(2)div絕對定位的妙用;在頁面布局的時候,position:absolute如果靈活的應用,可以達到很好的效果。

3、 使用float解決div左右布局,左為絕對寬度,右為相對寬度問題

html**

<

style

type

="text/css"

>

body   

html   

#left   

#main   

style

>

<

divid

="left"

>

div>

<

divid

="main"

>

div>

4、**如下。方法3可能沒有按照題目要求,但是可以達到一樣的頁面效果。主要是使用了div的float屬性。

html**

<

style

>

body   

html /*相容firefox的div高度100%*/   

#left   

#main   

style

>

<

divid

="main"

>

<

divid

="left"

>

left

div>

right   

div>

left

right

讓兩個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...

讓兩個Div併排顯示的方法

讓兩個div併排顯示 示例 style width 300px height auto float left display inline aaaadiv style width 300px height auto float left display inline bbbbdiv 示例 left,...