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

[jhwcd]

请教精通div+css帮我看看这个页面的效果是如何实现的。
参考的地址：http://news.sina.com.cn/society/
我一般写DIV，假如要两栏布局，喜欢把高度写死。但是这样一来在IE，和FIR游览器中经常会出现底部对不齐的问题
我看了新浪上的页面，他们的DIV从来不定高度，应该是自适应，但是怪就怪在，左中右栏目不管你其中任何一个栏目如何增加减少文字行，左中右三栏的底部始终是对齐的。我查了他们的CSS也没看出什么。他们的那个每个栏目的边框线也不知道是怎么弄出来的。

[jhwcd]

[Quote=引用 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…
[/Quote]
谢谢，还真是像你说的那样。

[jhwcd]

自己先顶顶。

[twtetg]

坐个椅子，专心听讲！

[cloudgamer]

貌似是图片
并不是真的border

[飘零雾雨]

它的边框线其实是用背景图平铺出来的，仔细看它的样式及结构。
这样做很简单，但扩展性不好。

[ddcatlee]

怎么看都是table布局，难道咱们看到的页面不一样？

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

[jhwcd]

[Quote=引用 5 楼 ddcatlee 的回复:]
怎么看都是table布局，难道咱们看到的页面不一样？

.PartA .td_1 {
background:#FAFAFA none repeat scroll 0 0;
border:1px solid #FFCC9F;
vertical-align:top;
width:307px;
}
[/Quote]
不是table布局.是DIV写的.他们那三栏的左右黄色的边线框我看样式也是图片.最怪的是,三栏的高度没有定,也没有AUTO.这个方法要是掌握了很有用,我写DIV经常遇到三栏对不齐高度,因为文字内容会有变化的,可能三栏都不一样的文字内容,就有可能对底部对不齐,但他们的页面我下载下来看,不管你如何增加减少其中某栏的文字列表内容,其它两栏都跟着变,高度始终都是一样的.想知道CSS如何控制的,但是查了半天也没找到.

[ddcatlee]

竖线是背景图，最下面放一个层，是底边

[maskdata]

他的底部的左右两个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}

[maskdata]

这本身就是布局的一些技巧而已
用最外围的控制视觉
用内部的控制数据
一个外围被撑高的情况下不会导致视觉问题