请教精通div+css帮我看看这个页面的效果是如何实现的-CSDN论坛

⋅请教精通div+css帮我看看这个页面的效果是如何实现的 ⋅今天晚上去看了鸟巢的田径比赛，真不错，真壮观。。。 ⋅明天就是北京奥运会了，散分庆祝^_^ 更多帖子 关注私信空间博客 jhwcd 本版专家分：15104 黄花 2008年7月 Web 开发大版内专家分月排行榜第二 结帖率 100%: 请教精通div+css帮我看看这个页面的效果是如何实现的。
参考的地址：http://news.sina.com.cn/society/
我一般写DIV，假如要两栏布局，喜欢把高度写死。但是这样一来在IE，和FIR游览器中经常会出现底部对不齐的问题
我看了新浪上的页面，他们的DIV从来不定高度，应该是自适应，但是怪就怪在，左中右栏目不管你其中任何一个栏目如何增加减少文字行，左中右三栏的底部始终是对齐的。我查了他们的CSS也没看出什么。他们的那个每个栏目的边框线也不知道是怎么弄出来的。

0 2008-11-03 10:54:38

回复数 10 只看楼主引用举报楼主

⋅请教精通div+css帮我看看这个页面的效果是如何实现的 ⋅今天晚上去看了鸟巢的田径比赛，真不错，真壮观。。。 ⋅明天就是北京奥运会了，散分庆祝^_^ 更多帖子 关注私信空间博客 jhwcd 本版专家分：15104 黄花 2008年7月 Web 开发大版内专家分月排行榜第二: 自己先顶顶。

0 2008-11-03 11:02:08

只看TA 引用举报 #1 得分 0

twtetg 本版专家分：66: 坐个椅子，专心听讲！

0 2008-11-03 11:16:03

只看TA 引用举报 #2 得分 5

⋅如何让输入的excel单元格实现"竖排文字" ⋅如何输出excel文件单元格有“缩小字体填充”的功能 ⋅加载不了google chart怎么办？ 更多帖子 关注私信空间博客 cloudgamer 本版专家分：23459: 貌似是图片
并不是真的border

0 2008-11-03 11:17:20

只看TA 引用举报 #3 得分 10

⋅新年伊始，散点分，祝自己行大运 ⋅CSS参考手册v3.1.0发布，欢迎使用 ⋅CSS参考手册新鲜出炉，欢迎使用 更多帖子 关注私信空间博客 飘零雾雨 本版专家分：17896 黄花 2006年10月 Web 开发大版内专家分月排行榜第二: 它的边框线其实是用背景图平铺出来的，仔细看它的样式及结构。
这样做很简单，但扩展性不好。

0 2008-11-03 11:39:16

只看TA 引用举报 #4 得分 20

⋅谁能清下多媒体设计里面的帖子 ⋅firefox里有横滚那 ⋅请帮忙推荐一个php或asp的文章发布系统，要带论坛。 更多帖子 关注私信空间博客 ddcatlee 本版专家分：13201 蓝花 2004年7月多媒体/设计/Flash/Silverlight 开发大版内专家分月排行榜第三: 怎么看都是table布局，难道咱们看到的页面不一样？

.PartA .td_1 {
background:#FAFAFA none repeat scroll 0 0;
border:1px solid #FFCC9F;
vertical-align:top;
width:307px;
}

0 2008-11-03 11:40:23

只看TA 引用举报 #5 得分 30

⋅请教精通div+css帮我看看这个页面的效果是如何实现的 ⋅今天晚上去看了鸟巢的田径比赛，真不错，真壮观。。。 ⋅明天就是北京奥运会了，散分庆祝^_^ 更多帖子 关注私信空间博客 jhwcd 本版专家分：15104 黄花 2008年7月 Web 开发大版内专家分月排行榜第二: 引用 5 楼 ddcatlee 的回复:
怎么看都是table布局，难道咱们看到的页面不一样？

.PartA .td_1 {
background:#FAFAFA none repeat scroll 0 0;
border:1px solid #FFCC9F;
vertical-align:top;
width:307px;
}

不是table布局.是DIV写的.他们那三栏的左右黄色的边线框我看样式也是图片.最怪的是,三栏的高度没有定,也没有AUTO.这个方法要是掌握了很有用,我写DIV经常遇到三栏对不齐高度,因为文字内容会有变化的,可能三栏都不一样的文字内容,就有可能对底部对不齐,但他们的页面我下载下来看,不管你如何增加减少其中某栏的文字列表内容,其它两栏都跟着变,高度始终都是一样的.想知道CSS如何控制的,但是查了半天也没找到.

0 2008-11-03 11:54:08

只看TA 引用举报 #6 得分 0

⋅谁能清下多媒体设计里面的帖子 ⋅firefox里有横滚那 ⋅请帮忙推荐一个php或asp的文章发布系统，要带论坛。 更多帖子 关注私信空间博客 ddcatlee 本版专家分：13201 蓝花 2004年7月多媒体/设计/Flash/Silverlight 开发大版内专家分月排行榜第三: 竖线是背景图，最下面放一个层，是底边

0 2008-11-03 12:26:32

只看TA 引用举报 #7 得分 0

⋅随机取值算法问题 ⋅对于OOP的方法归属有点疑惑.高手指教一下吧 ⋅关于MYSQL按值排序的问题 更多帖子 关注私信空间博客 maskdata 本版专家分：411

他的底部的左右两个DIV是用FLOAT:LEFT布局的

而他的背景是个图片.是放在这2个DIV之上的DIV里的..
他的行高就是被.Left撑起来的.而.Right的高不足也没关系.因为.Right的边框其实是.PartC的...只视觉上让你以为是他的

.PartC {

	MARGIN-TOP: 8px;

	DISPLAY: inline-block;

	BACKGROUND: url(http://i0.sinaimg.cn/dy/shehui/07index/shxw_mj_013_1.gif) repeat-y;	WIDTH: 950px}

.PartC .Left {FLOAT: left;	WIDTH: 737px}

.PartC .Right {	FLOAT: left;	MARGIN-LEFT: 7px;	WIDTH: 206px}

0 2008-11-03 12:36:08

只看TA 引用举报 #8 得分 0

⋅随机取值算法问题 ⋅对于OOP的方法归属有点疑惑.高手指教一下吧 ⋅关于MYSQL按值排序的问题 更多帖子 关注私信空间博客 maskdata 本版专家分：411: 这本身就是布局的一些技巧而已
用最外围的控制视觉
用内部的控制数据
一个外围被撑高的情况下不会导致视觉问题

0 2008-11-03 12:39:17

只看TA 引用举报 #9 得分 135

⋅请教精通div+css帮我看看这个页面的效果是如何实现的 ⋅今天晚上去看了鸟巢的田径比赛，真不错，真壮观。。。 ⋅明天就是北京奥运会了，散分庆祝^_^ 更多帖子 关注私信空间博客 jhwcd 本版专家分：15104 黄花 2008年7月 Web 开发大版内专家分月排行榜第二: 引用 8 楼 maskdata 的回复:
他的底部的左右两个DIV是用FLOAT:LEFT布局的

而他的背景是个图片.是放在这2个DIV之上的DIV里的..
他的行高就是被.Left撑起来的.而.Right的高不足也没关系.因为.Right的边框其实是.PartC的...只视觉上让你以为是他的

CSS code.PartC {
    MARGIN-TOP: 8px;
    DISPLAY: inline-block;
    BACKGROUND: url(http://i0.sinaimg.cn/dy/shehui/07index/shxw_mj_013_1.gif) repeat-y;    WIDTH: 950px}
.PartC .Left…

谢谢，还真是像你说的那样。

0 2008-11-03 13:22:18

只看TA 引用举报 #10    得分 0

请教精通div+css帮我看看这个页面的效果是如何实现的 [问题点数：200分，结帖人jhwcd]