<html>
<head>
<style>
.content
{
height:200px;
width: 200px;
background-color:red;
}
.descrip
{
max-width:200px;
}
</style>
<script type="text/javascript" src="jquery-1.10.0.min.js"></script>
</head>
<body>
<div class="content">
<div id = "item1" class="item">
<div class="title">title</div>
<div class="descrip">description description description description</div>
</div>
<div id = "item2" class="item">
<div class="title">title</div>
<div class="descrip">description description description description description</div>
</div>
<div id = "item3" class="item">
<div class="title">title</div>
<div class="descrip">description</div>
</div>
</div>
<script>
var contentHeight = $(".content").height();
var itemHeight = $(".item").outerHeight(true);
var totalHeight=0;
var itemNum = 0;
$(".item").each(function(obj){
var itemHeight = $(this).outerHeight(true);
totalHeight += itemHeight;
itemNum += 1;
});
var marginDistance = ($(".content").height() - totalHeight)/(itemNum - 1);
$(".item").css("margin-bottom",marginDistance);
</script>
</body>
</html>
