要做一个左右两列等高的布局。要自适应屏幕宽度，所以不能给固定高度。

没什么好办法，只能用jquery了。

简单粗暴的思路： 先用jquery获取左边图片文字的高度h1，再去获取右边图片文字的高度h2，然后蓝色那块的高度就是 h1- h2。

感觉很简单是不是？不过有时候以为很容易的事情并不容易，这个获取到的height只有文字的高度。那么图片的高度呢，去哪了？是为什么，因为float属性吗？去掉float属性，还是不行，还是0。因为jquery版本吗？换一个版本也不行。为什么为什么为什么，真是想不通，这个height（）这么难用吗？别人用的时候也会这么困难吗？

各种测试各种猜测都不行，慢慢地一个想法浮现了出来，会不会是图片还没加载到就先运行js代码了？

我之前是这么写的    $(document).ready(function(  ){  代码 })

jquery的ready只是dom的结构加载完毕，便视为加载完成，并不会考虑图片是否加载完成，结果是获取高度为0。

换一种方法，用js的window.load方法

window.load=function(){
代码
}

window.是指dom的生成和资源的加载，比如flash、图片完全加载出来后才执行。

ok，好了，获取高度正确，两边实现等高了，哈哈

这就是今天的收获了。知道了 $(document).ready(function(  ){  代码 }) 和  window.load=function(){ 代码 }的区别，下次遇到这种情况就明白了。

附上jquery代码：

window.onload=function(){
    var winwidth = $(window).width();
    if ( winwidth > 768 ) {
 var clh = $(".content-big").outerHeight();
     
 var smh = $(".news-item-pic").outerHeight(); 
 var txth = clh - smh - 30;
 
 $(".news-item-txt").css("height",txth); 	} 	
}