


A piece of div css code to arrange the two divs on the page left and right. How to implement it without using float? _html/css_WEB-ITnose
Jun 24, 2016 pm 12:08 PM 頁(yè)面里有一個(gè)container,?里面有兩個(gè)div
已知container的寬是800
讓leftDiv寬為200,?rightDiv寬為600?橫向排列起來(lái),請(qǐng)問(wèn)要怎么寫(xiě)?
如果不使用float應(yīng)該怎么實(shí)現(xiàn)?(我的頁(yè)面比這個(gè)復(fù)雜很多,用了float后ie和firefox顯示差異太大,我想知道有沒(méi)有什么好的技巧能夠代替float,所以提了這個(gè)問(wèn)題)?
回復(fù)討論(解決方案)
1,頁(yè)面再?gòu)?fù)雜,各種瀏覽器對(duì)float解釋的還是不錯(cuò)的。
2,不用float的話,我唯一知道的就是絕對(duì)定位了。。。一側(cè)用絕對(duì)定位,另外一側(cè)用margin?賦值。
3,推薦還是用float,絕對(duì)定位會(huì)越搞越麻煩。
4,float的話,左右都要float,下面用clear清除一下,就不會(huì)有問(wèn)題了。ie6?下的雙倍邊距用_display:inline解決。firefox下的清除,可以寫(xiě)#container:after{overflow:hidden;display:block,content:"";height:0;line-height:0;}就可以解決了。
幾點(diǎn)額外的建議:
1.?不要認(rèn)為你把container寬度設(shè)為800,leftDiv設(shè)為200,rightDiv設(shè)為600就能擁有“實(shí)誠(chéng)”的布局。
實(shí)際上,有些寬度是你很容易忽略的,比如border,padding,margin,這些都是很容易忽略的,建議把leftDiv和rightDiv按百分比設(shè)定,并且加起來(lái)小雨100%。比如:leftDiv?=?24%,?rightDiv?=?74%。
2.?不用一味地float:left;?不要忘記還有float:right。給rightDiv設(shè)定float:right有時(shí)會(huì)有意想不到的收獲。
簡(jiǎn)單地,可以這樣寫(xiě):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb_2312" /><title>No Title</title></head><style>#container { width:800px; padding:0; margin:0 auto; height:100%;}#leftDiv { width:24%; float:left; text-align:center; line-height:600px; height:600px; display:block; background-color:#ccc; color:#f00;}#rightDiv { width:74%; float:right; text-align:center; line-height:600px; height:600px; display:block; background-color:#c00; color:#fff;}</style><body><div id="container"> <div id="leftDiv"> leftDiv </div> <div id="rightDiv"> rightDiv </div> </div> </body></html>
table
布局格式已經(jīng)固定的話 最外面直接包TABLE一行2列 何必寫(xiě)這么多CSS搞自己頭暈 而且里面2個(gè)DIV是獨(dú)立的以后修改也不麻煩
display:inline吧
float這里就不貼代碼了,不用float的話,可以用定位來(lái)做,這種方法的優(yōu)點(diǎn)是可以按DIV的順序來(lái)決定優(yōu)先顯示的順序,代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></head><body><style type="text/css">body {font-size:9pt;text-align:center;}#container {position:relative;margin:auto;width:800px;height:200px;}#leftDiv {position:absolute;top:0;left:0;width:200px;height:200px;background:#ddd;}#rightDiv {position:absolute;top:0;right:0;width:600px;height:200px;background:#eee;}</style>1、先顯示leftDiv<div id="container"> <div id="leftDiv">leftDiv</div> <div id="rightDiv">rightDiv</div> </div>2、先顯示rightDiv<div id="container"> <div id="rightDiv">rightDiv</div> <div id="leftDiv">leftDiv</div> </div></body></html>
說(shuō)白了就是如果不想用float定位,那么就請(qǐng)使用position:absolute吧
使用時(shí)請(qǐng)注意在父層div中設(shè)定position:relative
然后left和right兩個(gè)子層position:absolute
多說(shuō)一句,子層這時(shí)候會(huì)脫離文本流,但是如果想讓此div中數(shù)據(jù)能夠自動(dòng)撐開(kāi)div,那么請(qǐng)?jiān)谠搶幼钕旅嫣砑右粋€(gè)清除浮動(dòng)的元素如?
float這里就不貼代碼了,不用float的話,可以用定位來(lái)做,這種方法的優(yōu)點(diǎn)是可以按DIV的順序來(lái)決定優(yōu)先顯示的順序,代碼如下:
HTML?code
body{
font-size:9pt;
text-align:center;}
#container{
position:relative;
margin:auto;
width:800px;
height:200px;}
#leftDiv{
position:absolute;
top:0;
left:0;
width:200px;
height:200px;
background:#ddd;}
#rightDiv{
position:absolute;
top:0;
right:0;
width:600px;
height:200px;
background:#eee;}
1、先顯示leftDiv
2. Display rightDiv first