一、使用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二、通過設定float來讓div併排顯示bbbb
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三、對於兩個div併排,左邊為絕對寬度,右邊為相對寬度的,需要用到這種布局的情況比較多見,如左邊為導航,右邊為內容的頁面2222
2222
2222
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>
leftright
讓兩個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,...