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

下载SAP解决方案产品演示

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

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

13 1/2 1 2 ››

游客
该用户匿名发帖

发表于 2008-8-29 10:30

一个简单的DIV排列问题

HTML codetech.techweb.com.cn7]%],b%o6g:W
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">"n3x:G3w0f
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>tech.techweb.com.cn/K;J0R,\4m
<style type="text/css">
#div1{.f2V!U6m3R+~4d2t
width:200px;4h,u7w6X1p*u {:w&W W2t
height:200px;0D5}![3n&Z%e f
background-color:#669933;程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛$L V4u4G,Y#O
float:lefttech.techweb.com.cn1B8d9c'R8u:W
}
#div2{程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛6~5j&P'U+{'k*L4`:U
width:200px;
height:100px;
background-color:#CC0099;4x7X;~3U-I:L
float:left
}1c!K-|%C9L#g
#div3{:G3q#~;Q-\9L8r3I
width:200px;程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛&C7|,B$X8x$B3x
height:100px;
background-color:#003399;
float:left
}7R!m;G%m#Q0u$T
</style>tech.techweb.com.cn#\,Z!F2^%i9Y
</head>程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛-H-Q#a$v#L0X1v/n)P.w*s
<body>
<div id="div1">DIV1</div>tech.techweb.com.cn3N.t.Y1`8g(m
<div id="div2">DIV2</div>TechWeb-技术社区5h p*?1i$P;^3s(y
<div id="div3">DIV3</div> F4T9L$^/[-X,Z*q8h
</body>
</html>1e2b!j'[,w8k2H(z%d0m
&a-j2@5w8G%a6V+v/|
这三个DIV会从右到左依次排列,但是我想实现的效果是:程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛0H-~$U1Y+y8D1W#B'F.r
DIV1排在左侧,DIV2、DIV3分别排在右上和右下，这种怎么做啊？
前提是不要在div2，div3外面再加一个DIV(@1K!\*?1v/Z#d&b)m

引用回复

游客
该用户匿名发帖

发表于 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
left: tech.techweb.com.cn-`3X%x$f)I4X!U0S:R,T,[
top:

引用回复

游客
该用户匿名发帖

发表于 2008-8-29 10:31

HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>TechWeb-技术社区:g2z5m1s$F5u-q5j+h
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">1~-o"c,`8i;`5o.|+I
<title>无标题文档</title>
<style type="text/css">TechWeb-技术社区(d3z#C&w%u K
#div0{
width:400px;程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛(F$l-c9J5O K-{
}
#div1{)i6d'U9f/M'F
width:200px;
height:200px;7V)|"t#X(]1_9g8g
background-color:#669933;
float:left
}
#div2{*Z n/h6O2S
width:200px;TechWeb-技术社区+e;e,y3Q3\5l9E7M4D'l
height:100px;+y6Z$r x3u
background-color:#CC0099;2~.`1m9N'_'W:C
float:left
}
#div3{!h/i8K(T(e"J F$m&L
width:200px;
height:100px;9u*@*k6D5P!|7y
background-color:#003399;(W7U(s3C M9P+e
float:left;
}TechWeb-技术社区+k0F&y*d!b

</style>0k2M$T*z0y/h9w6z
</head>7j0]0I-R!r&k;~!i8p

<body>TechWeb-技术社区7n;|:\0D Y(}(T0Z
<div id="div0">TechWeb-技术社区(R7z6M#W!j*y(G
<div id="div1">DIV1</div>8D5L!K1F4J0m
<div id="div2">DIV2</div>.J)M7B;C+S-y
<div id="div3">DIV3</div>程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛-F9l1R7N+N a"r"j
</div>!@7V#\'i&n1Z V
</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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">7T7o:T;Q H#?#h"r
<title>无标题文档</title>程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛*y0].A*`/W&d+s,v2m
<style type="text/css">
#div0{3r%y5C6c'v.l
float:left;'D a7o4D;u,`
}%c&V"a,n/}!x)@,|
#div1{
width:300px;
background-color:#ff0000;
float:left
}
#div2{6h8['^3U2G"U)q#X
width:300px; w&}3o%S&k$Z)e }/T
background-color:#00cc00;
float:left2j+?)_+F S%Y9E"J3v9g(Y
}tech.techweb.com.cn(_$z)]8{0R
#div3{
width:300px;5g(l4z4[%g'w#c0l
background-color:#ffff00;程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛8z9h%{;C#o
clear:left;
}4`8\%I(_;N+T

</style>
</head>

<body>
TechWeb-技术社区'K9c+N4R(b
<div id="div1">DIV1</div>6r4g:E+o ~"i6b
<div id="div0">
<div id="div2">DIV2</div>
<div id="div3">DIV3</div>
</div>
</body>tech.techweb.com.cn(s$w3x6w#?0V4t+W5~
</html>

引用回复

游客
该用户匿名发帖

发表于 2008-8-29 10:31

把div2和div3的float:left属性去掉
:\0\,d)M4s"X:y
HTML code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">7[,H4B#I#G4k9z$b*H'E
<html>
<head>3V3V:P&g U8t
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">"H(l%L$y7^)o
<title>无标题文档</title>TechWeb-技术社区!r)_7j;d4P*^
<style type="text/css">
#div1{
width:200px;
height:200px;
background-color:#669933;
float:left;
}TechWeb-技术社区;c"j6G)X$u)M4}
#div2{
width:200px;#v+M6Y U%s
height:100px;%]$w/U&e-n*U
background-color:#CC0099;1|2W'{,_)I!F7|9i9t&]!^*M
}
#div3{:X&}.@2y+z,e%Z9x(b
width:200px;程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛&H"b4l$K#e-m.P
height:100px;程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛 z#G(u4n)j6G
background-color:#003399;TechWeb-技术社区;T;E a!j#Z.L8O-V(p
}7a8Y/T.q+N$T)s)x!{/e K

</style>
</head>

<body>
<div id="div1">DIV1</div>
<div id="div2">DIV2</div>
<div id="div3">DIV3</div>
</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"> TechWeb-技术社区/\;B*~2i/w.g:}5o8f%Z*R
<html> 7f0H4k2j;Z/P*N-F0W;p
<head> tech.techweb.com.cn$L1b7P0S5y3H(X
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档 </title> TechWeb-技术社区'F2z$~)F5X8u2N
<style type="text/css">
#div1{ $o/\!V8?(a!o%@3\
width:200px; 程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛;c9U;a4w8D:g%[-a
height:200px; TechWeb-技术社区"o5S8t!u!{$j
background-color:#669933;
float:left
} tech.techweb.com.cn'f,I8T-`.a5l o,C [ Z(v,v
#div2{
width:200px; 程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛#r*i%A5|9W!r6m,f
height:100px; 程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛7W!o7y1o/{#m#{
background-color:#CC0099;
float:right
} 程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛 h/y#f;y1S3z
#div3{ TechWeb-技术社区"I4W/[+L*O
width:200px; "y+j;H"{(s(s9B,j,w(s
height:100px; +^-]/X)G:k-H7F%X+E/R
background-color:#003399; tech.techweb.com.cn$o)A6[8F"t&?:X
clear:both;
float:right %m:[#k$G%S'q0v2O
} tech.techweb.com.cn3m1b*h)b(f;e*d+v8v
TechWeb-技术社区;~,B7d4{;S#]/P!U
</style> tech.techweb.com.cn6D9J1s*H(V
</head>

<body> TechWeb-技术社区%d8V*a;X&|9g*`1W
<div id="div1">DIV1 </div> TechWeb-技术社区4G+z%R,j+R&_;d(Y.v
<div id="div2">DIV2 </div> #g&w+G6K4?.X0n
<div id="div3">DIV3 </div> 'h9x$f)r0]8B%z3Q
</body>
</html>

引用回复

游客
该用户匿名发帖

#10

发表于 2008-8-29 10:31

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> :i(@1l6F,{$]&M.E
<html>
<head> TechWeb-技术社区#I0s7D*{'c2^
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛0Q)k&^,k;E6x5n7}
<title>无标题文档 </title>
<style type="text/css">
#div1{
width:200px;
height:200px; *Y2E8b/V(t*Q5E*C:F/}!G
background-color:#669933; +s*q9\-D$`'V%v
float:left *\,C(v*k8u6G%V*J
} ;m&Y B)m+K
#div2{
width:200px;
height:100px; 'Y'F4r"V7^4i%`
background-color:#CC0099;
float:right 程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛7k+{&G,b5F S2v7n
}
#div3{
width:200px;
height:100px;
background-color:#003399;
clear:both;
float:right )s;~#]+^9W"[;y#D
}

</style> TechWeb-技术社区9W o!T'[8`!Q
</head>
tech.techweb.com.cn0o%N:]/t/r5E6m7L3p7`%h4^"J
<body>
<div id="div1">DIV1 </div>
<div id="div2">DIV2 </div> 程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛6Y5b;A#^'A$~
<div id="div3">DIV3 </div> TechWeb-技术社区4m0w&W"r.j7M'm
</body> 1V5D+W/d"b0\
</html>

引用回复

13 1/2 1 2 ››

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

TOP

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