一个简单的DIV排列问题 - 程序开发 - TechWeb-技术社区

下载SAP解决方案产品演示

TechWeb-技术社区 » 程序开发 » 一个简单的DIV排列问题

‹‹ 上一主题 | 下一主题 ››

13 1/2 1 2 ››

游客
该用户匿名发帖

发表于 2008-8-29 10:30

一个简单的DIV排列问题

HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">TechWeb-技术社区6e!R)y;^9T"V
<html>9b&l$W#s.k2v
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>$q3V.b'Y"d.]+T1z7^
<style type="text/css">程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛9O&N5h3q(B*J
#div1{
width:200px;程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛%O#h#h,_)G2F
height:200px;3{%w*E5y!\.u:k G
background-color:#669933;
float:lefttech.techweb.com.cn6@%R9r5\1s3p.q5j3S2]"r
}tech.techweb.com.cn5y0A7n2~;{#a.o;i:z
#div2{
width:200px;&l1\*p5E8w(i/~.I(k'A
height:100px;2H,x0j z%~%Y%{0w Q*q&@
background-color:#CC0099;
float:leftTechWeb-技术社区3k,T,X(@8M0v#O q
}'j"}1C5y-t)t2Z"F1Z.v
#div3{:m'm/O5]+]%^8w%S
width:200px;,L+H,Q/C2r9y7h(}5|.P/b3r
height:100px;
background-color:#003399;
float:left
}
</style>
</head> ^.Q&F7X#Z*|+Z-s!y#|
<body>tech.techweb.com.cn%[1_)}5I1?:N:a7f2V4w0C6P
<div id="div1">DIV1</div>
<div id="div2">DIV2</div>+h.}6i$j1u7M(c
<div id="div3">DIV3</div>tech.techweb.com.cn"m+K:Z2E"H:q2l9x
</body>
</html>TechWeb-技术社区(t$u/C9M'y1e.S&_
TechWeb-技术社区6z6Q-U#e7W+V
这三个DIV会从右到左依次排列,但是我想实现的效果是:
DIV1排在左侧,DIV2、DIV3分别排在右上和右下，这种怎么做啊？
前提是不要在div2，div3外面再加一个DIV {5~'I"R!E3Q"u3y*K"L3N1|2~

引用回复

游客
该用户匿名发帖

发表于 2008-8-29 10:30

float还有right了

引用回复

游客
该用户匿名发帖

发表于 2008-8-29 10:30

当div1、div2和div3的宽度超过浏览器宽度时且div1的长度超过div2时div3会自动排到div2下面
或者在div2和div3中间再加个div间隔

引用回复

游客
该用户匿名发帖

发表于 2008-8-29 10:31

position:absolute 4T$];Q5R2|*g%|2k4_:H6T3i
left:
top:

引用回复

游客
该用户匿名发帖

发表于 2008-8-29 10:31

HTML code-}.E,g1R.o%Q6C-~;`
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title> }7B'x-x4s)A9W4O$J*{
<style type="text/css">
#div0{
width:400px;
}tech.techweb.com.cn"s;b1x'X-{3X
#div1{
width:200px;6W$w h2F)@5H2U7E
height:200px;tech.techweb.com.cn"r&]6U.d2x-k:o
background-color:#669933;
float:leftTechWeb-技术社区1S!S1F*Q$S2@
}TechWeb-技术社区-O2@3p"V#`3T%x5c$N(S
#div2{
width:200px;
height:100px;
background-color:#CC0099;
float:left程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛#E)d'~(F't8T
};O!G;m7M8v1`3E/`3?*\'s
#div3{程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛7n$k.o1M*d.X*q.Q
width:200px;
height:100px;
background-color:#003399;
float:left;
}

</style>
</head>

<body>
<div id="div0">*m Q#_)d(H5q4V:}"j9k
<div id="div1">DIV1</div>tech.techweb.com.cn'W,j6H0o,E
<div id="div2">DIV2</div>
<div id="div3">DIV3</div>程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛0Z&}0b;I+I/l:d
</div>!y8p!R1H%?$e/U&e*O%\2V
</body>
</html>

引用回复

游客
该用户匿名发帖

发表于 2008-8-29 10:31

在楼上的代码再改进下不受高度限制

HTML code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">)K6_1w*_'n-D,r
<html>
<head>TechWeb-技术社区'F%Z,w7l0v;W8q
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">:}#^({:b$Y1f8g
#div0{TechWeb-技术社区(?.g;N*r;g+n7v"f8p
float:left;3Y#_7j%d0^7|:w
}(u:A([7|*U;j4J
#div1{,w1D8^${6n9^4m
width:300px;
background-color:#ff0000;:O2Q!y"^6y
float:left
}TechWeb-技术社区&w:|"U q;m3O#|2M8A
#div2{
width:300px; g5G-l2_%\&Y-@+L
background-color:#00cc00;
float:left
}
#div3{
width:300px;%G/d8^+q;_;f)E7\3j1i
background-color:#ffff00;5B:W'r;q1D `
clear:left;
}tech.techweb.com.cn,_#M.Q'K2J(l.@"m1m
程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛"["`8r)U8r-N(T
</style>程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛3L9`4z.g(K4k'y#h
</head>

<body>(h,_.W#^3^"A;x
TechWeb-技术社区3|7p1K2g!@
<div id="div1">DIV1</div>
<div id="div0">.E4[%w%r6Q+D6W#[5d#n3N
<div id="div2">DIV2</div>tech.techweb.com.cn%]*Q0_#j#k
<div id="div3">DIV3</div>
</div>
</body>
</html>

引用回复

游客
该用户匿名发帖

发表于 2008-8-29 10:31

把div2和div3的float:left属性去掉 TechWeb-技术社区5?7X.y/|:Y#C2F,Y
-a$`-u7y7D#j6c5{
HTML code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">4s#F6a6L,y'c(p
<html>
<head>0Y9i2y:u1e:l4U)M1|-^!l"w
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title> C+J-P0Z1~1y
<style type="text/css">7l)W$k'~!@$T;e
#div1{TechWeb-技术社区)F!r7[$P8e1?
width:200px;;l"[7r%p2w5L0I3E#Q
height:200px;;M.f5N"k.V.S&Y9]0\ O1o
background-color:#669933;7q;x$`3j1W
float:left;程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛!q7?/p&O"c&V,z'a.Z
}tech.techweb.com.cn:w8q"c%\7B5S%s
#div2{
width:200px;tech.techweb.com.cn ~4?#Z!d"]-W
height:100px;6Z#}4D9C&{
background-color:#CC0099;TechWeb-技术社区-?3u3z4^8u q*{
}1W(G!a4B4k"p!Z3r4T
#div3{
width:200px;
height:100px;
background-color:#003399;4a9z,r'A7x;B5g
}5W,B"c-|$E6w-y;U8m
"O5o"Z6F;X4Y
</style>TechWeb-技术社区*h1F;e%h6i3p*L*U
</head>.X1n2v$d2E6x4k4U
TechWeb-技术社区!p#N2C4k5{2a7V
<body>7U8J/H%n'~&g
<div id="div1">DIV1</div>
<div id="div2">DIV2</div>
<div id="div3">DIV3</div>6@'`-f%f8W9b,c
</body>
</html>

引用回复

游客
该用户匿名发帖

发表于 2008-8-29 10:31

楼上这种受高度限制了

引用回复

游客
该用户匿名发帖

发表于 2008-8-29 10:31

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 3_-]1]5X$a6m
<html>
<head> ,M*c C+U*W*`(q
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档 </title> 1N9{-V3?,_
<style type="text/css"> 9B T0_+t8J4`'M:j9^
#div1{ TechWeb-技术社区6h0\)S;m'{-@9E1i2g0O
width:200px;
height:200px; (T1s-j4\:V7d9]"Z"s.Z+z
background-color:#669933; 9o7k9u1W3@7j+S8G4}6~,P
float:left tech.techweb.com.cn5J2f&i:z*R'i/{
} $V%?4j7N0m"t%i
#div2{ -T%M%C#a'd.X7U*G
width:200px; ,Q+t9F/u-u&I!W j7J
height:100px;
background-color:#CC0099;
float:right 4K%~"I9`#O9u7X
} TechWeb-技术社区%y4k2F7d#Q
#div3{ +o;X%B8] E/k&I7w.@$Z7G8R
width:200px;
height:100px;
background-color:#003399; 7G"W!E Q4V(@5W6g,v
clear:both; 1R$^9`5r1X;g5x0k,t+N9c
float:right TechWeb-技术社区3b;[%e"d$@4y&J9l9v4b
}

</style>
</head> 8c4A+l7l*|8z4V.z

<body>
<div id="div1">DIV1 </div> 7j9E4w1w#M"V&j:a:D5o,P
<div id="div2">DIV2 </div>
<div id="div3">DIV3 </div>
</body> TechWeb-技术社区/m!I0h3^.L6F(]1Q
</html>

引用回复

游客
该用户匿名发帖

#10

发表于 2008-8-29 10:31

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> tech.techweb.com.cn'c.N0o0X+d+G2p+M ^:w![
<html> TechWeb-技术社区-^5z0a1}6c2^8W:o
<head> tech.techweb.com.cn(b g1P8[7i5[$m4d#v
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档 </title>
<style type="text/css"> %S3u!D.O4z+{+^
#div1{
width:200px; TechWeb-技术社区(`,X(?6f&d!O*I3I(m,h
height:200px;
background-color:#669933; 5D0g+|)D8W.L&G2P.O
float:left TechWeb-技术社区!o.B-L:c([9j4T/o3T
} ,m6\$\1U.T6[/P9b4b1?6|
#div2{ 2w;?4_#['{;y)i-s8d
width:200px; $l2c9N0c,V'e/n;G
height:100px;
background-color:#CC0099;
float:right /N0K(h5K)^'H%U-L)K
} )s)u9x)G3F.Y-o"x#r/o
#div3{
width:200px; 程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛/]5W9Z+|-K4h
height:100px;
background-color:#003399;
clear:both; +I ~4u0a,B*h$Z1[
float:right tech.techweb.com.cn$A5B3W9X0Y0S
} 'R:J!o"^#S#A;P.O

</style>
</head>
TechWeb-技术社区*Y,B3X!v*@.i B7L1E/E
<body> 程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛1B6U-t5T$q9?
<div id="div1">DIV1 </div> tech.techweb.com.cn4x!{'_%W1x&A \5}
<div id="div2">DIV2 </div>
<div id="div3">DIV3 </div> (}+e8N"[5c3x7u/V-_
</body> (r h7z2v5G
</html>

引用回复

13 1/2 1 2 ››

当前时区 GMT+8, 现在时间是 2008-11-23 08:53
京ICP证060517号

TOP

清除 Cookies - 联系我们 - TechWeb.com.cn - Archiver - WAP